Struggling with getting an image to scale properly inside a nested div in a fluid layout. Looking for advice on how to prevent the image from becoming smaller than its parent div.
EDIT: Here is an updated CodePen link demonstrating that using min-height squeezes the image
Example HTML:
<div class="container">
<div class="item half">
<p>
Some text
</p>
</div>
<div class="item half">
<img src="http://dummyimage.com/hd1080" class="full-width">
</div>
</div>
CSS:
.container{
margin: 0 auto;
max-width: 1920px;
}
.item{
height: 300px;
float:left;
overflow: hidden;
background-color: gray;
}
.half{
width: 50%
}
.full-width{
max-width: 100%;
}
Visual representation of the issue: https://i.stack.imgur.com/ZNNEX.png
Desired outcome illustration:
Edit: Image should not be squeezed, instead overflow should be hidden. Acceptable for images to be cropped if necessary. https://i.stack.imgur.com/JvqJU.png
Any insights are greatly appreciated.