CSS image resize issue

by

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>

More Related Contents:

  1. Black image fade over image [duplicate]
  2. How do I auto-resize an image to fit a ‘div’ container?
  3. When to use IMG vs. CSS background-image?
  4. Fill SVG path element with a background-image
  5. Is element block level or inline level?
  6. Removing whitespace between HTML elements when using line breaks
  7. Should I specify height and width attributes for my IMGs in HTML?
  8. Embed image in a element
  9. Make an image responsive – the simplest way [duplicate]
  10. How can I make all images of different height and width the same via CSS?
  11. How can I fill a div with an image while keeping it proportional?
  12. CSS image resize percentage of itself?
  13. img tag displays wrong orientation
  14. Image scaling causes poor quality in firefox/internet explorer but not chrome
  15. How to get a background image to print using css?
  16. Center image element in parent div
  17. CSS: How can I set image size relative to parent height?
  18. CSS Background image not loading
  19. Should image size be defined in the img tag height/width attributes or in CSS? [duplicate]
  20. How to change an image on click using CSS alone?
  21. How to make images stay within the rows of a css grid container?
  22. How to replace color of PNG image using CSS? [duplicate]
  23. How to strike through obliquely with css
  24. How to center a (background) image within a div?
  25. Responsive image align center bootstrap 3
  26. How to place Text and an Image next to each other in HTML?
  27. Make Bootstrap’s Carousel both center AND responsive?
  28. Use the HTML tag as a background image instead of the CSS background-image property?
  29. Setting the image `width: 0` hides it, while `width: 0%` makes it occupy the space, too
  30. Is it possible to set a src attribute of an img tag in CSS?

Leave a Comment