To control the width and height of an image by the code outside image tag

<img src="http://myImage">

With the code above, myImage will be shown.

I can control the width and height of the image by the style code which is inside of the image tag below…

<img src="http://myImage" style="width:200px;height:200px">

I like to control the width and height of the image outside of the image tag instead of inside due to my own reason( because the code inside of the image tag is completely fixed.)

The would-be code below doesn’t work correctly, but I hope it show what I want.

<div style="width:200px;height:200px"><img src="http://myImage"></div>

Please note the fixed code of comment which is not dynamic can be inserted like the below.

<div style="width:200px;height:200px"><img src="http://myImage" follow the outside div code in width and height></div>

In the below,
The background of myText1 is very wide, but in case of myText2, the width of the background “YELLOW” is controlled by the code outside myText2 div.

<div style="background:yellow;">myText1</div>
<div style="width:100px;"><div style="background:yellow;">myText2</div></div>

LIke myText2, I like the control the width by outside code.

Have you thought of using external CSS? In-line styling is a maintenance nightmare and not too flexible.

This will size the container, but not the image within. But you can use CSS to limit images to the size of their container.

img {
    width: 100%; /* Fill the container width */
    height: auto; /* maintain aspect ratio */
}

Though I sometimes prefer max-width: 100% to keep the image from going beyond its native size.
You may also consider the object-fit property.

2 Likes

Hi joon1,

@SamA74 has already given a solution, I just want to add some general points regarding the img element. :slight_smile:

I too don’t recommend using the style attribute in the html, it is a nightmare to maintain and even worse to debug!
For temporary overrides in an individual page a better option would be the style tag in the html head after the external css link.

I would also suggest to use the width and height attributes instead of the style attribute in the img tag. (Mind that in html5 the value can not be percents, but you can use viewport units instead of pixels.)

According to W3C specs for the img element:

  • The width and height attributes are optional, they give user agents an idea of the size of an image or object so that they may reserve space for it and continue rendering the document while waiting for the image data.

  • When specified, the width and height attributes overrides the natural image size.

  • The src attribute and the alt attribute are both required. Also noting: The alt attribute on images is a very important accessibility attribute.

The HTML5 specs about the required src and alt attributes:

What an img element represents depends on the src attribute and the alt attribute.

  • If the src attribute is set and the alt attribute is set to the empty string:
    The image is either decorative or supplemental to the rest of the content, redundant with some other information in the document.

  • If the src attribute is set and the alt attribute is set to a value that isn’t empty:
    The image is a key part of the content; the alt attribute gives a textual equivalent or replacement for the image.

  • If the src attribute is set and the alt attribute is not:
    There is no textual equivalent of the image available.

  • If the src attribute is not set and either the alt attribute is set to the empty string or it is not set at all:
    The element represents nothing.

  • Otherwise: (My edit = If the src attribute is not set and the alt attribute is set to a text value)
    The element represents the text given by the alt attribute.

More info:
Mozilla HTML reference: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img
W3 HTML4 Spec. - The img element: https://www.w3.org/TR/html401/struct/objects.html#edef-IMG
W3 HTML5 The img alt-text: https://www.w3.org/TR/html5/embedded-content-0.html#general-guidelines
WhatWG specs about omitting the alt attribute: https://html.spec.whatwg.org/multipage/images.html#unknown-images

3 Likes

It’s also worth noting that if you do set the image size with these attributes, even in pixels, you can still override that with css, so it’s not set in stone and can still be made responsive or otherwise manipulated.

1 Like

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.