Question

Currently I’m using just HTML and LESS CSS…

I’ve set my img tag to have a max-width: 100% so that, essentially, my images are all flexible and sized perfectly to the window/screen that they are viewed in/on.

Containing the images are divs, whose widths are always 100%, but, whose heights need to match that of the images.

How can I get the divs the same height as the (flexible) images? Is there any way to do this just with HTML and LESS CSS or is Javascript required?

Any help would be appreciated, thanks 🙂

Answer 1

yes you can use a clearfix for this…

.clearfix:after {
    content: ".";
    display: block;
    clear: both;
    visibility: hidden;
    line-height: 0;
    height: 0;
}

.clearfix {
    display: inline-block;
}

html[xmlns] .clearfix {
    display: block;
}

* html .clearfix {
    height: 1%;
}

add “.clearfix” to your div containing the img.