0

Допустим есть блок div, в нём размещаются несколько img. Как сделать так, чтобы если ширина img была меньше ширины div, то img не растягивалась, а оставалась на максимуме своей естественной ширины? Т.е. чтобы img не растягивалась по ширине div (если div очень большой), а оставалась на своей "естественно" стопроцентной ширине.

При этом я не знаю фактических размеров картинок (допустим рандомные с сервера приходят).

Для большего понимания наклепал картинку в paint. введите сюда описание изображения

Желательно это сделать без вмешательства js, но если без него никак, то лучше с ним.

1
  • max-width?. . .
    – andreymal
    21 сен 2018 в 9:18

2 ответа 2

1

div {border:3px outset green; margin:.5em 0}
.box1 {width:160px; height:320px;}
img {max-width:100%; height:auto}
<div class="box1">
    <img src="http://lorempixel.com/130/90" alt="" />
    <img src="http://lorempixel.com/160/90" alt="" />
</div>

Что-то в таком роде

2
  • Все картинки в 1 div.
    – Drovosek
    21 сен 2018 в 9:27
  • @ЕгорСпириади изменил..... Но в целом значения не имеет в одном диве или в разных. Использовал разные для примера.
    – Nilsan
    21 сен 2018 в 9:53
-3

Блин, забыл что у меня margin и padding по нулям во всей вёрстке и из-за этого не работало просто выставление max-width: 100%. В общем для меня вот такой код подошёл:

img {
max-width: 100%;
height: auto;
margin: auto;
}
1
  • Так в моём ответе именно такой код и был max-width....
    – Nilsan
    21 сен 2018 в 9:55

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.