CSS image resize issue
Solution 1:
If you do not want your images to stretch out, you should pin down one dimension and allow the other dimension as auto. (this preserves the aspect ratio of the image)
See the example below where width is kept constant while height auto-adjusts:
img {
display: block;
}
.correct,
.incorrect {
border: 1px solid red;
display: inline-block;
}
.incorrect img {
max-width: 100%;
width: 100px;
height: 100px;
}
.correct img {
max-width: 100%;
width: 200px;
height: auto;
}<div>This one stretches out:</div>
<div class="incorrect">
<img src="https://via.placeholder.com/150x50" />
</div>
<div>This will preserve aspect ratio and look right:</div>
<div class="correct">
<img src="https://via.placeholder.com/150x50" />
</div>See the example below where height is kept constant while width auto-adjusts:
img {
display: block;
}
.correct,
.incorrect {
border: 1px solid red;
display: inline-block;
}
.incorrect img {
max-height: 100%;
height: 100px;
width: 100px;
}
.correct img {
max-height: 100%;
height: 200px;
width: auto;
}<div>This one stretches out:</div>
<div class="incorrect">
<img src="http://placehold.it/150x50" />
</div>
<div>This will preserve aspect ratio and look right:</div>
<div class="correct">
<img src="http://placehold.it/150x50" />
</div>