Maintaining Aspect Ratio With CSS3 Object Fit Property
Published in
2 min readJan 13, 2013
- Aspect Ratio is the proportional ratio between width and height.
- While displaying an image in browser it is very important to maintain width ratio or else the image appears as Detroit
- The aspect ratio can be two type display aspect ratio and storage aspect ratio.
- object-fit is css3 property to handle aspect ratio of image displayed.Object-fit property has different values “fill” , “contain” , “cover” , “none” , “scale-down” .
- The variation of this property in different browser are -ms-object-fit , -moz-object-fit , -o-object-fit , -webkit-object-fit , object-fit .
- Object fit property is in draft version and not supported by all the browser. Still we can test it in Opera mini mobile browser.
<!DOCTYPE html>
<html>
<head>
<title>Aspect Ratio And Object Fit</title>
<style>
.image-two {
width:200px;
height:400px;
-o-object-fit: contain;
}
.image-three {
width:200px;
height:400px;
-o-object-fit: cover;
}
.image-four {
width:50px;
height:50px;
-o-object-fit: scale-down;
}
</style>
</head>
<body>
<p>Original Image is 67-77</p>
<img class="image-one" src="demo-square.JPG"/>
<br/>
<p>Original Image with "contain"</p>
<img class="image-two" src="demo-square.JPG"/>
<br/>
<p>Original Image with "cover"</p>
<img class="image-three" src="demo-square.JPG"/>
<br/>
<p>Original Image with "scale down"</p>
<img class="image-four" src="demo-square.JPG"/>
</body></html>
The preceding screenshot shows the output of this demo.
Originally published at www.tutorialsavvy.com on January 13, 2013.
