Как сделать что бы большие изображение со свойством width:auto
не становилось больше родителя div
?
width:100%
не подходит так как растягиваются малые изображения.
0
-
4max-width: 100% ? – mJeevas 5 сен '16 в 10:33
1 ответ
2
Достаточно использовать max-width: 100%
.
Большие изображения будут пропорционально уменьшены и вписаны в родительский блок.
Маленькие изображения будут показаны без изменений.
.container {
border: 1px solid #000;
width: 200px;
}
.image {
max-width: 100%;
width: auto;
}
<div class="container">
<p><img class="image" src="https://satyr.io/50x50/50"></p>
<p><img class="image" src="https://satyr.io/300x50/300"></p>
</div>