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

Question

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

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

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

Answer 1

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

Answer 2

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

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

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

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

Я тестировал в IE 9, FireFox 18.0.2 и Chrome 25.0.1364.97, Safari iOS и, кажется, работает.это на изображении шириной 1024 пикселей, отображаемом с разрешением 678 пикселей (максимальная ширина), и изображении шириной 500 пикселей, отображаемом на 500 пикселей (ширина изображения).

Answer 3

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

Answer 4

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

  #image {
      height: auto;
      width: auto;
      max-height: 550px;
      max-width: 1200px;
      margin-left: auto;
      margin-right: auto;
      display: block;
 }  

Answer 5

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

  max-width: 100%;
  padding-right: 30px;
  /*add more paddings if needed*/

Answer 6

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

Вот ссылка

Answer 7

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

.img_100 {
  width: 100%;
}