Когда я поворачиваю изображение с помощью функции rotate (90), верхняя часть изображения обрезается, даже если в контейнере есть overflow: auto.

#container {
  width: 100%;
  overflow: auto;
}

.rotate90 {
  -webkit-transform: rotate(90deg);
  -moz-transform: rotate(90deg);
  -o-transform: rotate(90deg);
  -ms-transform: rotate(90deg);
  transform: rotate(90deg);
}
<div id="container">
  <img src="https://dummyimage.com/2048x1024/000/fff" id="image" class="rotate90" alt="">
</div>

Пример: https://jsfiddle.net/dh0o6vz3/3/.

Есть ли способ изменить css контейнера так, чтобы он переполнялся как над изображением, так и ниже?

css
2
Southy 2 Янв 2018 в 14:17

2 ответа

Лучший ответ

Так что мне пришлось принудительно переводить, что, я думаю, имеет смысл.

.rotate90 {
  -webkit-transform: rotate(90deg) translate(25%);
  -moz-transform: rotate(90deg) translate(25%);
  -o-transform: rotate(90deg) translate(25%);
  -ms-transform: rotate(90deg) translate(25%);
  transform: rotate(90deg) translate(25%);
}

Это работает не во всех случаях, поскольку ширина изображения определяет, какой% translate мне нужен.

Но он работает достаточно хорошо для моих вариантов использования,

0
Southy 3 Янв 2018 в 13:47

Вместо этого вам нужно использовать overflow:visible, и вы также можете изменить transform-origin в зависимости от того, как вы хотите показать изображение

#container {
  width: 100%;
  overflow: visible;
  border: 1px solid;
}

.rotate90 {
  transform: rotate(90deg);
  transform-origin: bottom;
}
<div id="container">
  <img src="https://dummyimage.com/248x124/000/fff" id="image" class="rotate90" alt="">
</div>
3
Temani Afif 9 Мар 2019 в 09:23