Hey there is a solution without the image, you can do it the following way,
< div class="flex-image" >< / div > <br/> <br/> .flex-image {<br/> width: 100%;<br/> height: 0;<br/> min-height: 300px;<br/> box-sizing: border-box;<br/> padding-bottom: 50%; /* image ratio */<br/> background-image: url('http://apod.nasa.gov/apod/image/1410/mwSunToMoon_lane_1800.jpg');<br/> background-size: cover;<br/> background-position: center;<br/> }
This way you exclude the img element. this works well for your example as well.<br/>
Hey there is a solution without the image, you can do it the following way,
< div class="flex-image" >< / div > <br/>
<br/>
.flex-image {<br/>
width: 100%;<br/>
height: 0;<br/>
min-height: 300px;<br/>
box-sizing: border-box;<br/>
padding-bottom: 50%; /* image ratio */<br/>
background-image: url('http://apod.nasa.gov/apod/image/1410/mwSunToMoon_lane_1800.jpg');<br/>
background-size: cover;<br/>
background-position: center;<br/>
}
This way you exclude the img element. this works well for your example as well.<br/>