Force an image to fit and keep aspect ratio

Question

I want an image to fill the 100% of its container\'s width, and I want it to have a max-heigth property set to it, all this keeping the aspect ratio but allowing to lose any

Answer 1

You can achieve this using css flex properties. Please see the code below

.img-container {
  width: 150px;
  height: 150px;
  border: 2px solid red;
  justify-content: center;
  display: flex;
  flex-direction: row;
  overflow: hidden;
  
}
.img-container .img-to-fit {
  flex: 1;
  height: 100%;
}