Для моего просмотра изображений HTML я попытался автоматически повернуть некоторые из моих изображений с помощью CSS -*-transform: rotate (на 90 градусов).Поскольку ширина была больше, чем высота изображений, элемент img был слишком мал, и повернутое изображение накладывалось на часть текста выше и ниже.
Чтобы исправить / обойти эту проблему, я создал div вокруг него с ожидаемым размером.Это привело к еще одной проблеме, что изображение теперь также неуместно.Чтобы исправить / обойти эту вторую проблему, я создал вокруг нее вторую div, которая исправила плохую позицию.
Один пример (онлайн: здесь ):
- Изображение имеет размер w = 1024, h = 768.
- Я поворачиваю его на 90 градусов.
- Внешний
div: <div style="display:block; width:768px; height:1024px;"> - inner
div: <div style="position:relative; left:-128px; top:128px; display:block;">
Это приводит к правильному / ожидаемому / требуемому позиционированию и выравниванию.
Интересно, есть ли более элегантный / более чистый способ сделать это.