旋转图像并调整 space

Question

我想旋转两个框之间的图片（90 度）。问题是在这种情况下图片与两个框重叠。

示例 1：Wrong formatting

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>

示例 2：Desired formatting

有一个解决方案，但我不能使用它，因为"image-orientation"不是所有浏览器（尤其是移动设备）都能识别：

<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>

旋转后的图片不与其他元素重叠，还有其他解决办法吗？或者是否有适用于所有浏览器的图像方向替代方案？

Answer 1

如果您希望将图像保持在相对 space 范围内，例如限制宽度，那么我建议使用以下方法在图像周围添加一个 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>

旋转图像并调整 space

Rotate image and adjust space

css

image

rotation

overlap

adjustment

示例 1：Wrong formatting

示例 2：Desired formatting