QNimate

  • CoursesVideos
  • WP PremiumPlugins
  • DemosLab
  • BlockClusterBuild Private Blockchains
  • Home
  • QIdea
  • QTrack
Home Home Understanding HTML img tag

Understanding HTML img tag

understanding tag

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

        <head>
        <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
1-1

index.html

    <head>
        <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
2-1

<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

<body>
    <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
1

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

<body>
    <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
11


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

Responsive Web Design with HTML5 and CSS3

HTML and CSS: Design and Build Websites

Implementing Responsive Design

Mar 11, 2014Narayan Prusty
Bypass Same Origin PolicyGenerating Custom Markup For WordPress Menu

Leave a Reply Cancel reply

To create code blocks or other preformatted text, indent by four spaces:

    This will be displayed in a monospaced font. The first four
    spaces will be stripped off, but all other whitespace
    will be preserved.
    
    Markdown is turned off in code blocks:
     [This is not a link](http://example.com)

To create not a block, but an inline code span, use backticks:

Here is some inline `code`.

Narayan Prusty

I am a full-stack web developer. I specialize in Blockchain and JavaScript. This is my personal blog where I write about programming and technologies that I learn and feel interesting to share.

Image5 years ago Web Developmentaspect ratio, image formats, images, responsive
Share this
0
GooglePlus
0
Facebook
0
Twitter
0
Linkedin
Related Articles
  • Generating Custom Markup For WordPress Menu
  • Maintaining Aspect Ratio of iFrame in Responsive Site
  • Horizontal and vertical Centering Using CSS
  • HTML Table Designing and Best Practices with Examples
  • Data URI Tutorial
Our Sponsor
Freelance: I am available
@narayanprusty
Hi, I am a full-stack developer - focusing on JavaScript, WordPress, Blockchain, DevOps, Serverless and Cordova. You can outsource your app development to me.





Will get back to you soon!!!
WordPress
ReactJS
Meteor
Blockchain
Serverless
Kubernetes
DevOps
DB & Storage
Ejabberd
Let's get started
My Books

2014 - 2015 © QNimate
All tutorials MIT license