Ограничить высоту отзывчивого изображения с помощью css

Моя конечная цель - иметь жидкость <img>, которая не будет расширяться за явно заданной высотой элемента parent/grandparent, используя только css.

В настоящее время я делаю это с нормальным (max-width:100; height:auto;) жидким изображением и javascript, читая атрибуты высоты/ширины из тега img, вычисляя пропорции, вычисляя правильную ширину изображения при желательном ограничении высоты, и применяя эту ширину как max-width в элементе контейнера изображения. Довольно просто, но мне бы хотелось сделать это без javascript.

height:100%; width:auto; не работает так же, как и его поперечный, и я сделал некоторые попытки с помощью мягкой коробки Unc Dave ol и абсолютного позиционирования, но мне нужно заранее знать соотношение сторон изображения и поэтому не может быть применено через изображения, имеющие разные пропорции. Таким образом, окончательное требование - css должно быть пропорциональным агностику.

Я знаю, я знаю, ответ на этот вопрос, вероятно, сидит рядом с фермой единорога, но я думал, что я все равно выброшу его.

Ответ 1

Трюк заключается в том, чтобы добавить как max-height: 100%;, так и max-width: 100%; в .container img. Пример CSS:

.container {
  width: 300px;
  border: dashed blue 1px;
}

.container img {
  max-height: 100%;
  max-width: 100%;
}

Таким образом, вы можете изменить указанную ширину .container любым способом (например, 200px или 10%), и изображение будет не больше, чем его естественные размеры. (Вы можете указать пиксели вместо 100%, если не хотите полагаться на естественный размер изображения.)

Здесь вся скрипка: http://jsfiddle.net/KatieK/Su28P/1/

Ответ 2

Вы можете использовать встроенный стиль для ограничения высоты:

<img src="" class="img-responsive" alt="" style="max-height: 400px;">