How can I make all images of different height and width the same via CSS?

by

Updated answer (No IE11 support) 

img {
    float: left;
    width:  100px;
    height: 100px;
    object-fit: cover;
}
<img src="http://i.imgur.com/tI5jq2c.jpg">
<img src="http://i.imgur.com/37w80TG.jpg">
<img src="http://i.imgur.com/B1MCOtx.jpg">

Original answer 

.img {
    float: left;
    width:  100px;
    height: 100px;
    background-size: cover;
}
<div class="img" style="background-image:url('http://i.imgur.com/tI5jq2c.jpg');"></div>
<div class="img" style="background-image:url('http://i.imgur.com/37w80TG.jpg');"></div>
<div class="img" style="background-image:url('http://i.imgur.com/B1MCOtx.jpg');"></div>

More Related Contents:

  1. Scale image to fit a bounding box
  2. Black image fade over image [duplicate]
  3. Image inside div has extra space below the image
  4. When to use IMG vs. CSS background-image?
  5. Fill SVG path element with a background-image
  6. What is the effect of encoding an image in base64?
  7. CSS Display an Image Resized and Cropped
  8. Is there an equivalent to background-size: cover and contain for image elements?
  9. How can I scale an entire web page with CSS?
  10. Removing whitespace between HTML elements when using line breaks
  11. Should I specify height and width attributes for my IMGs in HTML?
  12. Make an image responsive – the simplest way [duplicate]
  13. CSS image resize issue
  14. Floating an image to the bottom right with text wrapping around
  15. CSS image resize percentage of itself?
  16. img tag displays wrong orientation
  17. How does one use the onerror attribute of an img element
  18. Image scaling causes poor quality in firefox/internet explorer but not chrome
  19. CSS: How can I set image size relative to parent height?
  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 strike through obliquely with css
  23. How can I resize an image to a percentage of itself with CSS?
  24. CSS align images and text on same line
  25. How to auto-resize an image while maintaining aspect ratio
  26. download webpage and dependencies, including css images [closed]
  27. How to place Text and an Image next to each other in HTML?
  28. Make Bootstrap’s Carousel both center AND responsive?
  29. Use the HTML tag as a background image instead of the CSS background-image property?
  30. Is it possible to set a src attribute of an img tag in CSS?

Leave a Comment