Поверните изображение и отрегулируйте пространство

Question

Я хочу повернуть картинку (на 90 градусов) между двумя полями. Проблема в том, что в этом случае изображение перекрывает два поля.

Пример 1: неправильное форматирование

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: желаемое форматирование

Есть решение, но я не могу его использовать, потому что "ориентация изображения" не распознается всеми браузерами (особенно мобильными устройствами):

<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

Если вы хотите сохранить изображение в относительном пространстве, таком как ограниченная ширина, я бы предложил следующее, добавив тег 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>