My goal is to create responsive images with a fixed height.
Below is the HTML code I am using:
<div class="col-md-6">
<div class="img">
<img src="http://image.noelshack.com/fichiers/2016/16/1461065658-b-v-s.jpg">
</div>
</div>
<div class="col-md-6">
<div class="img">
<img src="http://image.noelshack.com/fichiers/2016/16/1461065665-kfp3.jpg">
</div>
</div>
I have also included my CSS:
.col-md-6 {
width: 50%;
float: left;
}
.img {
overflow: hidden;
position: relative;
height: 290px;
}
.img img {
max-width: 100%;
min-width: 100%;
min-height: 100%;
}
You can view the implementation on JSFiddle here: https://jsfiddle.net/23o81xrb/
The issue I'm facing is that even though the .img class has a height of 290px, the images are not adapting when the window size is reduced. I would like the images to maintain their 290px height and adjust in width like a "zoom" effect.
Apologies for any language errors, thank you for your understanding.
I would greatly appreciate any assistance provided. Thank you.