Tuesday, September 19

Maintain aspect ratio on image tag

Sometimes we are using img tag instead of background-image when displaying images to our page, specially when we have dynamic content to display. To  Maintain aspect ratio using background we normally do or declare:
 
div {
  background: url({url});
  width: 200px;
  height: 200px;
  background-size: cover;
}

But if you are using img tag, you may use
  object-fit: cover;


Example:
img {
  width: 200px;
  height: 200px;
  object-fit: cover;
}



To God all the Glory

2 comments: