Сделайте ширину изображения 100% родительского div, но не больше его собственной ширины

Я пытаюсь получить изображение (динамически размещенное без ограничений по размеру) так же широко, как его родительский div, но только до тех пор, пока ширина не будет больше ширины его на 100%. Ive пробовал это, безрезультатно:

img {
    width: 100%;
    height: auto;
    max-width: 100%;
}

Многие из этих изображений намного шире, чем их родительский div, поэтому Ид, как и их размер, соответствующим образом изменяет размер, но когда появляется небольшое изображение и его размер становится выше его обычных размеров, он выглядит ужасно. Есть ли способ сделать это?

ОТВЕТЫ

Ответ 1

Просто укажите только max-width: 100%, который должен это сделать.

Ответ 2

Нашел этот пост в поиске Google, и он решил мою проблему благодаря ответу @jwal, но я сделал одно дополнение к его решению.

img.content.x700 {
  width: auto !important; /*override the width below*/
  width: 100%;
  max-width: 678px;
  float: left;
  clear: both;
}

С помощью вышеизложенного я изменил максимальную ширину на размеры контейнера содержимого, в котором находится мое изображение. В этом случае это: ширина контейнера - заполнение - граница = максимальная ширина

Таким образом, мое изображение не вырвется из содержащего div, и я все еще могу поместить изображение в div содержимого.

Я тестировал в IE 9, FireFox 18.0.2 и Chrome 25.0.1364.97, Safari iOS и, похоже, работает.

Дополнительно: я тестировал это на изображении шириной 1024 пикселя, отображаемом на 678 пикселей (максимальная ширина), и изображение шириной 500 пикселей, отображаемое на 500 пикселей (ширина изображения).

Ответ 3

Установка ширины 100% - это полная ширина div, а не оригинальное полноразмерное изображение. Невозможно сделать это без использования JavaScript или другого языка сценариев, который может измерять изображение. Если вы можете иметь фиксированную ширину или фиксированную высоту div (например, ширину 200 пикселей), это не должно быть слишком сложно, чтобы дать изображению диапазон для заполнения. Но если вы поместите изображение размером 20x20 пикселей в поле размером 200x300 пикселей, оно все равно будет искажено.

Ответ 4

Если изображение меньше родительского...

.img_100 {
  width: 100%;
}

Ответ 5

Я использовал бы свойство display: table-cell

Вот ссылка