- 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.
Handling 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 .
contain : replaced content is sized to maintain its aspect ratio.
fill : replaced content is sized to fill the element’s content box.
cover : Replaced content is sized to maintain aspect ratio while filling the element’s entire content box.
scale-down : result in a smaller object size.
- Object fit property is in draft version and not supported by all the browser. Still we can test it in Opera mini mobile browser.
aspectRatioDemo.html,
<!DOCTYPE html>
<html>
<head>
<title>Aspect Ratio And Object Fit</title>
<style>
.image-one {
}
.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>
- Opera Mobile simulator,
Output:-
