CODEWITHSUNDEEP
jqueryhtmlcss
user979331
user979331

Reputation: 11911

CSS make two elements the same height, regardless of screen size

I have these two elements:

<div class="logo"><img src="images/logo.jpg" /></div>
<div class="click-here"></div>

when I shrink my screen, I would these elements to be the same size in height (click-here class has a background-color) but when I shrink my screen, the image gets smaller and the height for click-here stays the same, what am I doing wrong?

.logo {
        height:97px;
        width:24.4%;
        float:left;
}

.logo img {
        width:100%;
}

.click-here {
        text-align:center;
        font-family: 'MinionPro-Regular';
        font-weight:normal;
        font-size:1.5em;
        color:#FFF;
        background-color:#CF1F2E;
        height:97px;
        float:right;
        width:75%;
}

Upvotes: 0

Views: 241

Answers (2)

LcSalazar
LcSalazar

Reputation: 16841

Your div has a 97px height, but the image inside doesn't. Instead, it has a width, so it will size the height accordingly to keep ratio.

You could simply instruct the image to have a max-height: 100%;

See here

.logo img {
    width:100%;
    max-height: 100%;
}

But to keep the image's ratio, remove then the width definition, and change max-height to height: 100%;

See here

.logo img {
    height: 100%;
}

Upvotes: 1

jp-jee
jp-jee

Reputation: 1523

Both of your div's have a height of 97px, as you've specified. Your image is just higher than its wrapping div's width, and therefore its height is being adapted to the width of the div (to preserve the images aspect ratio).

Either adapt the width/height property of the image (considering one of these values will/should(?) be calculated for the given reason) or hide the div.logo's overflow.

Upvotes: 0

Related Questions