100% width background image with an 'auto' height

Question

I\'m currently working on a mobile landing page for a company. It\'s a really basic layout but below the header there\'s an image of a product which will always be 100% widt

Answer 1

It's 2017, and now you can use object-fit which has decent support. It works in the same way as a div's background-size but on the element itself, and on any element including images.

.your-img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}