Set image height to 75% of its container

Question

I have a responsive image list. Each image is inside a container. I want the image container to be 75% of its first container (unit container in this case)

the image ration is 1:1

I played a little with the image container percentage width but it feels like this is not the solution.

<ul class="list-inline unit_list ">
<li class="unit_list_item col-xs-24 col-sm-12 col-md-8">
    <a href='#' alt="unit">
        <div class="unit_container">
            <div class="icon_container unit_icon">
                <img class="img-responsive unit_image" src="http://placehold.it/60X60" />
            </div>
            <div class="unit_name">FREE</div>
        </div>
    </a>
</li></ul>

Btw, I'm using bootstrap if that's matter.

http://jsfiddle.net/wmu3w3ej/1/

Agree with Flopet answer, check this out http://jsfiddle.net/sameerast/wmu3w3ej/3/ — Sameera Thilakasiri, Sep 23 '14 at 07:44
`transform: scale(0.75);` to `.unit_image`? - http://jsfiddle.net/rtndqhys/ — Anonymous, Sep 23 '14 at 07:48
@SameeraThilakasiri It doesn't have any effect in this case because the parent doesn't have an explicit height. — Hashem Qolami, Sep 23 '14 at 07:48
@Mary Melody - That works but it's 75% not including the .unit_container padding. — user2587454, Sep 23 '14 at 07:57
@Flopet17 - it's responsive design. i can't give an explicit height to the parent. — user2587454, Sep 23 '14 at 07:58
http://stackoverflow.com/questions/5445491/height-equal-to-dynamic-width-css-fluid-layout DUPLICATEish. Read the answers here and you should be good. I'd recommend using the `:before` method [here](http://stackoverflow.com/a/20117454/3389737) — Luke, Sep 23 '14 at 08:07

score 2 · Accepted Answer · answered Sep 23 '14 at 14:29

2

Thanks to @Mary Melody

transform: scale(0.75);

works like magic

I'm a little afraid to use it since it's so simple.

any thoughts?

answered Sep 23 '14 at 14:29

user2587454

903
1
19
44

This is normally not where you ask questions, but answer them, even for yourself. Transform has good support for modern browsers look at the issues here and which browsers support it: http://caniuse.com/#search=transform – Christina Sep 23 '14 at 14:55

score 1 · Answer 2 · edited May 23 '17 at 12:05

Using the logic from here: https://stackoverflow.com/a/20117454/3389737

I have applied it to your situation: http://jsfiddle.net/phwaLmen/1/

#wrapper
{
    position: relative;
    width: 50%;
    overflow: hidden;
}

#wrapper:before
{
    content: "";
    display: block;
    padding-top: 75%;
}

#image
{
    position: absolute;
    top:      0;
    left:     0;
    bottom:   0;
    right:    0;
    height: 100%;
    width: 100%;
}

<div id="wrapper">
    <img src="http://placehold.it/350x350" id="image">
</div>

Add relative positioning to the parent, set its width as you'd like and make sure the overflow is hidden.

Create a :before element for the wrapper with a padding-top of 75%. Since there is no height specified for the #wrapper, this 75% is based on the width of the element :)

Then you have your image, positioned absolutely and then fitted to the container. If you want the image to be cropped instead of resized, remove the height: 100% and width: 100% style rules from it.

Thanks i tried this but it doesn't keep the aspect ration 1:1 of the image. — user2587454, Sep 23 '14 at 09:02
You asked for 75%, so it will never be 1:1 unless you use an image that is in those proportions? Also if you remove the last two styles to the image, as mentioned it crops it instead of resizing it. — Luke, Sep 23 '14 at 09:06

score 0 · Answer 3 · answered Sep 23 '14 at 08:28

0

You can do it like this (in your html):

<img src="img.jpg" height="75%" />

Good luck!

answered Sep 23 '14 at 08:28

Wijnand M

372
1
3
12

Set image height to 75% of its container

3 Answers3