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

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

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

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

6 94
html css width

6 ответов:

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

165

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

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

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

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

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

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

7

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

2

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

.img_100 {
  width: 100%;
}
0

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

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

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

здесь ссылке

-2