According to W3C <img> is a inline element. But it doesn’t follow all designing rules of inline elements. You cannot set height and width of inline elements but you can set height and width of <img>. <img> element’s design depends on aspect ratio, parent block container, dimensions, height and width.
<img> is inline or block element
If no height and width is provided to a <img> element then browser displays the image with actual dimensions.
If you set the height and width of <img> in px then the image is resized to fit in that many pixels. Aspect ratio and Pixel Dimensions of image are not considered when <img> is provided height and width in pixels. But if you provide only height in pixels and not provide width then width is decided by the browser according to the aspect ratio of the image considering the height. In the same way if you provide only width in pixels and not provide height then height is decided by the browser according to the aspect ratio of the image considering the height.
index.html
<style>
img
{
height: 100px;
width: 100px;
}
</style>
</head>
<body>
<h4>All images are of same size regardless of actual dimensions and aspect ratio</h4>
<img src="1.jpg">
<img src="2.jpg">
<img src="3.jpg">
</body>
Result
index.html
<title>Test</title>
<style>
img
{
height: 100px;
}
</style>
</head>
<body>
<h4>Height is provided in px, but no width. So browser decides width using aspect ratio of image</h4>
<img src="1.jpg">
<img src="6.png">
<img src="12.jpg">
</body>
Result
<img> elements works a bit different when you set its width and height in percentage. Its behaviour depends on the top most block level container element. <img> behaviour is different for container having automatic height and fixed height.
If the block container element has height set to auto then <img> elements height property in percentage will have no effect. <img> elements height property in percentage will be ignored. But the width of the <img> element will depend on the block container element’s width. In this case height of the image is decided according to aspect ratio considering the width of image.
index.html
<h4>Height property in % has no effect as block container has height set to auto</h4>
<div style="height: auto; background-color: grey">
<img src="1.jpg" style="height: 700%" />
<img src="2.jpg" style="height: 70%" />
<img src="3.jpg" style="height: 7%" />
</div>
<h4>Height property in % has no effect as block container has height set to auto but width property in % will have effect. Height is decided according to aspect ratio considering the width</h4>
<div style="height: auto; background-color: grey">
<img src="1.jpg" style="height: 700%; width: 30%" />
<img src="2.jpg" style="height: 70%; width: 20%" />
<img src="3.jpg" style="height: 7%; width: 30%" />
</div>
</body>
Result
If the block container element has height set in pixels or percentage then <img> elements height property in percentage will have effect accordingly.
index.html
<h4>Height property in % has effect as block container has height set in pixels. As width is not provided so the width is decided according to aspect ratio considering the height </h4>
<div style="height: auto; background-color: grey; height: 200px">
<img src="1.jpg" style="height: 100%;" />
<img src="2.jpg" style="height: 20%" />
<img src="3.jpg" style="height: 26%" />
</div>
<h4>Height and Width in % will have effect as the div has height set in pixels</h4>
<div style="height: auto; background-color: grey; height: 200px;">
<img src="1.jpg" style="height: 100%; width: 40%" />
<img src="2.jpg" style="height: 70%; width: 20%" />
<img src="3.jpg" style="height: 50%; width: 30%" />
</div>
</body>
Result
Conclusion
So we can say <img> element inherits some properties from inline elements and some from block elements. If you like this post please like and share it.
References
Leave a Reply