Make responsive image fit parent container

Question

I\'ve been trying to figure out if there is a pure CSS solution to ensure the image within my banner doesn\'t go below the height of the parent but keep ratio of the image.<

Answer 1

Your image will inevitably be out of ratio depending on the screen size, why not try a background image:

.banner_holder{
  width: 100%;
  height: 300px;
  min-height: 200px;
  position: relative;
  outline:1px dotted red;
  background: url('http://placekitten.com/g/800/600') center no-repeat;
  background-size: cover;
}

or you could just add a max height to your image tag:

.banner_holder img{
  width: 100%;
  max-height: 300px;
}