Как я могу отображать изображения в определенных размерах, не растягивая их?

Question

Я попробовал следующее, но это работает, только если изображение выше, чем его ширина.Какой лучший способ сделать это без PHP (я знаю о timthumb) и желательно без Javascript?

<div style="height:100px;width:100px;overflow:hidden;">
<img src="image.jpg" style="width:100px;" />
</div>

Answer 1

в этом случае невозможно получить соотношение изображения и ширины изображения с использованием только css

в будущем у нас будет

<div style="height:100px;width:100px;background-color:red;
background-image:url('asd (2).jpg');background-size:contain;
background-repeat:no-repeat;background-position:center;"></div>

работа с firefox / webkit, возможно, опера

так что теперь вам нужен JavaScript!

надеюсь, это поможет

Answer 2

Лучший способ думать о БЕЗ php - это использовать изображение в качестве фона для div - так что

<div style="height:100px; width:100px; 
background:url('whatever.jpg') no-repeat center center;"> </div>

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

Answer 3

Вы можете использовать PHP GD и функцию изображения getImageSize () * Docs 1002 *

, а затем визуализируйте HTML-код, рассчитав размеры на основе требуемого соотношения.