Image fit

by Julien Roche

HTML

Cover: <img class="cover" src="https://images.unsplash.com/photo-1512960708526-dc54f7627152?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=0e490563bb65d12cc7e44c52d8e20226&auto=format&fit=crop&w=634&q=80" alt="my image" />

Not Cover: <img src="https://images.unsplash.com/photo-1512960708526-dc54f7627152?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=0e490563bb65d12cc7e44c52d8e20226&auto=format&fit=crop&w=634&q=80" alt="my image" />

CSS

img {
  height: 250px;
}

.cover {
  width: 250px;
  object-fit: cover;
}