CSS中图片旋转超出父元素解决办法
发布时间：2023-09-06 16:32:44 作者： 小月亮 
我要评论
我要评论本文主要介绍了CSS中图片旋转超出父元素解决办法，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
下面的两种解决办法都会导致图片缩小，可以给图片进行初始化的宽高设置
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
html,body {
margin: 0;
padding: 0;
}
#box {
box-sizing: border-box;
width: 100%;
height: 240px;
background: pink;
}
#image {
transform: rotate(0);
object-fit: contain;
}
#btn {
margin-top: 100px;
}
</style>
</head>
<body>
<div id="box">
<img id="image" src="https://www.runoob.com/images/pulpit.jpg" alt="">
<!-- <img id="image" src="https://pics0.baidu.com/feed/c2cec3fdfc039245259830d9727ca5c77c1e2521.jpeg@f_auto?token=b910f4287521294b9469788c77a3ac93&s=A12326BEC5137FDECCBC8DC1030060BB" alt=""> -->
</div>
<button id="btn">旋转</button>
</body>
<script>
window.onload = () => {
let btn = document.getElementById('btn')
let image = document.getElementById('image')
let box = document.getElementById('box')
let childRawWidth = image.offsetWidth // 原始的图片宽
let childRawHeight = image.offsetHeight // 原始的图片高
let deg = 0
btn.onclick = function() {
if (deg > 360) {
deg = 0
} else {
deg += 90
}
// 方法一：使用 scale -- 父元素的高度不固定
// let childWidth = image.offsetWidth
// let childHeight = image.offsetHeight
// let scalePix = 1
// if (childWidth > childHeight) {
// scalePix = childHeight / childWidth
// } else {
// scalePix = childWidth / childHeight
// }
// image.style.transform = `rotate(${deg}deg) scale(${scalePix}, 1)`
// 方法二：将图片重新设置宽高 -- 父元素的高度固定
let parentWidth = box.offsetWidth
let parentHeight = box.offsetHeight
if (childRawWidth > childRawHeight) {
image.style.width = childRawHeight + 'px'
}
image.style.transform = `rotate(${deg}deg)`
}
}
</script>
</html>原始图片：
超出的效果图：
解决之后的效果图：
到此这篇关于CSS中图片旋转超出父元素解决办法的文章就介绍到这了,更多相关CSS 图片旋转超出父元素内容请搜索脚本之家以前的文章或继续浏览下面的相关文章，希望大家以后多多支持脚本之家！
相关文章
本文主要介绍了CSS中图片旋转超出父元素解决办法，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学2023-09-06
随着网站的发展,越来越多的网站开始采用折叠样式来提高页面的可访问性和可读性，本文主要介绍了纯CSS杂志封面折叠效果，分享给大家，感兴趣的可以了解一下2023-09-05- 这篇文章主要介绍了CSS 中的position属性实例详解,定位属性position有4个值，分别是静态定位（static）、相对定位（relative）、绝对定位（absolute）和固定定位（fixed）2023-09-04
在本文中，我们将探索 CSS Grid repeat() 函数的所有可能性，它允许我们高效地创建 Grid 列和行的模式，甚至无需媒体查询就可以创建响应式布局,需要的朋友可以参考下2023-09-01- 在网页设计中有时会设置某个DIV或者TABLE的高度自适应，即元素的高度充满父元素的高度,一般使用设置CSS height:100%来实现，本文主要介绍了css中div盒子height:100%高度无2023-08-29
本文介绍了如何巧妙的利用 CSS 中的各种高阶技巧，组合实现类似于碰撞场景的动画效果,创建出了非常有趣的 CSS 动画，期间各种技巧的组合运用，对使用CSS实现碰撞检测效果实2023-08-24
这篇文章主要介绍了CSS实现一个交互感不错的卡片列表,涉及到知识块本文结合实例代码给大家讲解的非常详细，需要的朋友可以参考下2023-08-24- 本文主要介绍了css中不确定盒子宽高上下左右居中的八种方法小结，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小2023-08-23
在页面编写中经常会碰到页面自适应的问题，也就是页面内部的元素会随着窗口的放大缩小而放大缩小，本文就来介绍一下css实现文字大小自适应的示例代码，感兴趣的可以了解一2023-08-23
Anchor Position 的出现，极大的丰富了 CSS 的能力，虽然语法稍显复杂，但是有了它，能够实现非常多之前实现起来非常困难，或者压根无法使用纯 CSS 实现的功能，本文，将向2023-08-17
最新评论