Reputation: 8156
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.
Upvotes: 2
Views: 7840
Reputation: 1922
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)
Upvotes: 9
Reputation: 3025
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
Upvotes: -1
Reputation: 1143
I found this code on another post:
.43 img { width: auto; }
.widescreen img { width: 100%; }
.portrait img { height: 100%; }
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);
Upvotes: 1