There is an image within the <img> tag and some text inside the <p> tag, both enclosed in a <div>.
Although the image is responsive and resizes proportionally when the browser window changes size, there is an issue where as the text wraps onto multiple lines below, the height of the image decreases in relation to the adjacent text. This affects the design of my site negatively. How can I ensure that the image maintains equal height with the neighboring text when the browser window is resized.
It's important to mention that when the browser window size is less than 768px, both the image and text block expand to 100% width and stack on top of each other.
To better understand the problem, please refer to the screenshots provided below. The first image shows the gap below the image - this is the issue that needs to be resolved. I want the image to stretch all the way down to the baseline of the last line of text while maintaining its aspect ratio.
Current Problem:
Desired Result:
EDIT
Please note that adding HTML width and height attributes to the <img> tag does not impact the image dimensions if CSS rules for image dimensions are specified.
In situations where content is generated from a WYSIWYG editor, it may not be feasible or practical to remove these HTML attributes manually. Especially if I am not the one creating the content.
* {
-webkit-box-sizing:border-box;
-moz-box-sizing:border-box;
box-sizing:border-box;
margin:0;
}
img {
max-width:100%;
height:auto;
}
.container {
max-width:1200px;
border:1px solid #eeeeee;
margin:0 auto;
}
.col {
width:100%;
float:left;
padding:15px;
}
.container {
content:"";
display:table;
clear:both;
}
@media only screen and (min-width: 768px) {
.left {
width:25%;
}
.right {
width:75%;
}
}<div class="container">
<div class="col left">
<img src="images/nature.jpg" width="640" height="480" />
</div>
<div class="col right">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque nec ligula ut tortor convallis ultricies sed vel leo. Nullam congue ligula sed lectus viverra rhoncus. Nullam tincidunt nibh sed ligula maximus faucibus. Nunc eu mauris purus. Vestibulum et nisl ut massa finibus laoreet in sit amet tortor. Suspendisse non leo quam. Ut consectetur dictum nibh vel vehicula. Vestibulum lobortis purus quam, id mattis purus sollicitudin volutpat. Maecenas ut libero in nisi egestas ornare nec ac lectus. Nullam urna nisi, rhoncus vitae viverra mattis, imperdiet nec velit. Aenean libero elit, luctus id maximus at, congue eget tortor. Nunc ultricies, augue eget facilisis luctus, nisl nibh aliquet libero, id ullamcorper ligula leo auctor ex.</p>
</div>
</div>