I have an image in the <img>
tag with some text in the <p>
tag. Both are enclosed inside a <div>
.
Though the image is responsive and resized in equal aspect ratio when the browser window is resized, but having one annoying issue which is that when resizing browser window, as the text is wrapped to multiple lines below, the image becomes small in height to its adjacent text. It makes my site design ugly. How can I make image equal in height to its neighbor text in resized window.
Please note that when the browser window is resized less than 768px, the image and text block both receives width of 100% and they are stacked over each other.
Please look at the screenshots given below to clearly understand my problem. In first picture, you can see the blank space below the image - that's my issue. I want to stretch image till baseline of the last line of my text but keeping aspect ratio intact.
Current Issue:
My Requirement:
EDIT
Please note that having HTML width
and height
attributes in the <img>
tag doesn't matter. It doesn't change the dimension of the image if CSS rules associated with image dimensions are written.
Also I can't remove these HTML width
and height
attributes from every image if the content is coming from WYSIWYG
. It won't be feasible and possible if I am not the person who is producing this 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>
object-fit
but don't know usage offlex
. Btw,tryed
shouldn't be written astried
?