CODEWITHSUNDEEP
cssimageresize
yozepi
yozepi

Reputation: 372

How do I use CSS to keep multiple images relatively sized withing the same outer element?

I've seen several posts about how to auto-size a single image within an outer element. All these solutions seem to do this by making the image width 100%. But I need to stack several images side by side, each image having height equivalent to the outer element height put maintaining relative width. I tried doing image height=100% but that doesn't seem to work.

In my case, the outer element is a div set to a relative position within an outer div.

<div class="basicskin thumb">
    <img class="background" src="/content/skinz/SolidBack/240px/SolidBack-sml_grn.png">
    <div class="numbers" style="top: 14.8571428571429%; left: 6.46666666666667%; height: 68.8253968253968%; width: 87.2444444444444%;">
        <img../><img../>
    </div>
</div>

The styles look like this:

div.basicskin
{
    position: relative;
    display: inline-block;
}

div.basicskin.thumb > img.background
{
    height: 32px;
    width: auto;
}

div.basicskin > div.numbers
{
    overflow: hidden;
}

div.basicskin > div.numbers img
{
width:auto;
position:relative;
}

My images want to render full size instead of relative to my "numbers" div.

What am I doing wrong?

Thanks for any help!

Upvotes: 2

Views: 297

Answers (2)

Andrii Verbytskyi
Andrii Verbytskyi

Reputation: 7631

If you want to set height: 100%; to the <img/>, you should make it display: block; and give some height to the parent block.

height: 100%; works only when it's parent has set height.

For IE inline-block support you can use this fix: 

.selector {
    display: inline-block;
    *zoom: 1;
    *display: inline;
}

Upvotes: 1

Havenard
Havenard

Reputation: 27854

Setting height to % can be tricky, because your element is inside <body> and <html> that may not be with 100% height unlike you may be instinctively assuming. You have to set those elements height to 100% too to make sure you can expand things to the full vertical extension of the screen. I also recommend you head your html file with <!doctype html> to make sure those things work correctly in every browser.

Upvotes: 0

Related Questions