Scale image with css to both width and height to scale

Question

The bounding box is approx 1000x600, and some images are 500x100, while some others are 400x100 (extreme examples). Now I\'d like to scale both up to the maximum size the bo

Answer 1

An update to this in 2020. The css property object-fit can be used to display an image at 100% width and height without distorting it.

.wrapper {
  height: 100px;
  width: 100px;
  border: 1px solid;
}

img {
  width: 100%;
  height: 100%;
}

.contain {
  object-fit: contain;
}

.cover {
  object-fit: cover;
}

  

↑ default, bad aspect ratio


  

↑ object-fit: contain;


  

↑ object-fit: cover;