Showing posts with label css. Show all posts
Showing posts with label css. Show all posts

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