Css changing aspect ratio of fluid images

Question

How can I crate a fluid image, but with an aspect ratio that I decide? (lets say 16:9)
I've already made it fluid with max-width: 100%; but I cant change the aspect ratio.

Note: the image has a different aspect ratio most of the times.

Did you want to change the proportion or is the image already is 16:9 format? — j08691, Jul 09 '12 at 16:26
You can't do that with CSS. You can either keep the existing ratio (by giving it a height of auto) or specify both the height and width with values in px or em etc. If you want more, use Javascript. — Mr Lister, Jul 09 '12 at 16:36

score 9 · Accepted Answer · edited Aug 10 '17 at 05:46

9

You can wrapp your image in two containers. Give one container height:0 and a padding-top with the percentage you want for the height of your image in proportion to the width. So, for a height of 50% of the width use padding-top:50% and height:0, which - as explained here - will make the height proportional to the width by 50%.

.wrapper {padding-top:50%;height:0;position:relative;}

Inside of that container, you place another container with the following styling:

.inner{position:absolute;left:0;top:0;right:0;bottom:0;}

Now just place your image in the inner container and give it width:100% and height:100%

See fiddle: http://jsfiddle.net/henrikandersson/PREUD/1/ (updated the fiddle)

edited Aug 10 '17 at 05:46

Yonggoo Noh

1,811
3
22
37

answered Jul 09 '12 at 18:13

Henrik Janbell

1,784
3
21
30

1

It works in chrome, firefox, ie9, and probably in ie8. Not sure about ie7, but what good stuff works well in ie7 :) – Henrik Janbell Jul 09 '12 at 18:46
Great, the image is stretched 100% to the page or DIV. I just liked to bring others's attentions to the possibility of using 16:9 or 4:3 ratios instead of 50% value in "padding-top:50%". Foe example, to resize the image to 16:9 ratio (9/16), it can be "padding-top:56%", and so on. – Alaa Sadik Dec 16 '15 at 08:21

score 1 · Answer 2 · edited May 23 '17 at 10:28

1

I found this code on another post:

Example

CSS

.43 img { width: auto; }
.widescreen img { width: 100%; }
.portrait img { height: 100%; }

JavaScript

var getAspect = function(){
    var h = window.innerHeight;
    var w = window.innerWidth;
    var aspect = w / h;

    var 43 = 4 / 3;
    var cssClass = "";

    if (aspect > 43) {
        cssClass = "widescreen";
    }
    else if (aspect === 43) {
        cssClass = "43";
    }
    else {
        cssClass = "portrait";
    }

    $("body").addClass(cssClass); // Using jQuery here, but it can be done without it
};

var checkAspect = setInterval(getAspect, 2000);

edited May 23 '17 at 10:28

Community

1
1

answered Jul 09 '12 at 16:39

Nathan

1,135
2
12
27

Yes, I know I can do it with javascript, but I wanted to do it with css, because some users don't have javascript enabled. – funerr Jul 09 '12 at 16:39
@agam360 I didn't realize that you wanted only CSS. Sorry. – Nathan Jul 09 '12 at 16:41
No problem, I am thinking to use javascript for now, so i'll take a look into it :) thanks – funerr Jul 09 '12 at 16:42

score -1 · Answer 3 · answered Jul 09 '12 at 16:53

-1

It would probably require extra markup in the HTML, but you could use the CSS Clip property to cut the visible portion of the image to what you would want to show. https://developer.mozilla.org/en/CSS/clip

answered Jul 09 '12 at 16:53

Ben

2,917
10
28
47

Css changing aspect ratio of fluid images

3 Answers3

Example

CSS

JavaScript

Linked