CODEWITHSUNDEEP
htmlimagecss
McShaman
McShaman

Reputation: 3995

inline-block object not resizing properly with dynamically sized image

I am trying to center a set of floated blocks that contain images that scale dynamically. However I am having an issue where the inline-block I am using to enter the floated blocks is not shrinking to the new size of the image. Instead it will wrap to the original size of the image, leaving a big empty space.

http://jsbin.com/ewonas/1/

body {
    text-align: center;
}

.inlineblock {
    background: red;
    display: inline-block;
}

.constrainer {
    width: 20%;
    float: left;
}

.constrainer img {
    width: 100%;
}

<body>
    <div class="inlineblock">
        <div class="constrainer">
            <img src="http://upload.wikimedia.org/wikipedia/commons/thumb/8/85/Smiley.svg/500px-Smiley.svg.png">
            <h1>Product title</h1>
        </div>
        <div class="constrainer">
            <img src="http://upload.wikimedia.org/wikipedia/commons/thumb/8/85/Smiley.svg/500px-Smiley.svg.png">
            <h1>Product title</h1>
        </div>
    </div>
</body>

Can somebody please help me fix this issue?

Thanks

Upvotes: 1

Views: 947

Answers (1)

tw16
tw16

Reputation: 29605

You are setting the width of the two .constrainer divs to 20%. What this means is that the width is 20% of the parent .inlineblock. So when you have to two of them that adds up to 40% of the parent. That means you have 60% remaining, or space for another 3 .constrainer divs.

To make the .inlineblock element shrink down, you would need to set the width of the .constrainer divs to a number independent of its parent e.g. a fixed width like 300px instead of a percentage.

Live example: http://jsbin.com/ewonas/6

Upvotes: 1

Related Questions