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

126

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

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

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

html width css Alfonso
источник
5
Что будет, если вы только укажете max-width: 100%?
Федор Сойкин
@ Федор Сойкин - Дайте это как ответ, и я проголосую за вас.
Герт Гренандер,
Однако было бы хорошо подумать, какие браузеры поддерживают максимальную ширину.
kbrimington
kbrimington действительно приносит хорошие результаты. Согласно reference.sitepoint.com/css/max-width#compatibilitysection , реализация IE8 содержит ошибки.
Альфонсо,

Ответы:

222

Просто укажите в max-width: 100%одиночку, что должно сработать.

Федор Сойкин
источник
1
Кажется, что Chromium просто оставляет 100% независимо от контекста. Возможно, мне стоит перестать постоянно смотреть на свою работу над бета-версией ПО. Спасибо!
Альфонсо,
Как это сделать без использования max-width: 100%. В React-Native невозможно использовать проценты.
Croolsby
@Croolsby, вы можете использовать процентное соотношение в react-native, но со строковым значением, например, «100%»
Рафаэль Овсепян
9

Нашел этот пост в поиске 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 пикселей (ширина изображения).

mattauckland
источник
1
Использование width:auto !important;исправило проблему в IE11 для меня, когда изображение было больше, чем его контейнер, а IE11 не уменьшал изображение. Установка этого в imgселекторе решила проблему в IE11. Однако установка width:100%;без другого правила ничего не сделала в IE11. Таким образом, "переопределение" должно быть включено, чтобы изображение уменьшилось до размера контейнера.
lowtechsun
3

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

Аманда
источник
1
по возможности приведите рабочий пример. Это рекомендуется. :)
bhb
1

В стиле линии - это работает у меня каждый раз

<div class="imgWrapper">
    <img src="/theImg.jpg" style="max-width: 100%">
</div>
Nelles
источник
0

Вы должны установить максимальную ширину и, если хотите, вы также можете установить отступы с одной из сторон. В моем случае max-width: 100% было хорошо, но изображение находилось в самом конце экрана.

  max-width: 100%;
  padding-right: 30px;
  /*add more paddings if needed*/
скомбинировать
источник
0

У меня также была такая же проблема, но я установил значение высоты в моем CSS на auto, и это устранило мою проблему. Также не забудьте сделать свойство display.

  #image {
      height: auto;
      width: auto;
      max-height: 550px;
      max-width: 1200px;
      margin-left: auto;
      margin-right: auto;
      display: block;
 }
Ной Франко
источник
просто fyi..вы можете убрать высоту: авто и ширину: авто. max-height и max-width - это одно и то же.
Дебби Курт,
-1

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

.img_100 {
  width: 100%;
}
SandroMarques
источник