我想旋转两个框之间的图片(90 度)。问题是在这种情况下图片重叠了两个框。
CSS:
.box{
height:50px;
width:200px;
background-color:blue;
}
HTML:
<div class='box'>Top</div>
<img style='transform: rotate(90deg);' src='https://cdn.pixabay.com/photo/2017/12/10/20/56/feather-3010848_960_720.jpg' width='200px'>
<div class='box'>Bottom</div>
有一个解决方案,但我无法使用它,因为所有浏览器(尤其是移动设备)都无法识别“图像方向”:
<div class='box'>Top</div>
<img style='image-orientation: 90deg;' src='https://cdn.pixabay.com/photo/2017/12/10/20/56/feather-3010848_960_720.jpg' width='200px'>
<div class='box'>Bottom</div>
旋转图像不与其他元素重叠是否还有其他解决方案?或者是否有适用于所有浏览器的图像方向替代方案?
如果您希望将图像保持在相对空间中,例如受限宽度,那么我建议以下内容在图像周围添加一个 div 标签,使用 before 伪选择器创建基于最大框的纵横比1:1 宽度和高度,然后绝对定位其中的图像以围绕中心接入点旋转。见下面的代码:
<style type="text/css">
.box{
height:50px;
width:200px;
background-color:blue;
}
.box--image {
position:relative;
max-width:200px;
outline:solid 1px red;
}
.box--image:before {
content:"";
display:block;
padding-top:100%;
}
.box--image img {
left:50%;
position:absolute;
top:50%;
transform:rotate(90deg) translate(-50%,-50%);
transform-origin:top left;
width:200px;
}
<div class="box">Top</div>
<div class="box--image"><img src="https://cdn.pixabay.com/photo/2017/12/10/20/56/feather-3010848_960_720.jpg" /></div>
<div class="box">Bottom</div>
本文收集自互联网,转载请注明来源。
如有侵权,请联系[email protected] 删除。
我来说两句