<p>I know that width and height property of HTML images can be set simply by <code><img src="Debian.jpg" style="height: 120px; width: 130px"></code>.</p> <p>What I am looking for is if there exists a single CSS property that takes only one value in <code>%</code> and scales the width and height of the original image according to that percentage. For example, if the height and width of <code>Debian.jpg</code> are <code>1000x700</code> and I specify <code>50%</code> in that CSS property then the image scales down to <code>500x350</code> and hence the aspect ratio is maintained.</p> <p>It's very hard for me to maintain the aspect ratio of the image while adjusting the height and width separately. If a property like that does not exist then is there any way to maintain the aspect ratio and achieve desirable dimensions of the image?</p>

<p>Yes, there is a way to maintain the image's aspect ratio and resize the image to a fraction of its original size. However, CSS cannot know the intrinsic size (the <em>original size</em>) of the image. Therefore, you can only do two things:</p> <ul> <li>Tell the CSS explicitly the original size</li> <li>Use JS to get the original size upon image load</li> </ul> <hr> <h3>What doesn't work</h3> <p>Using percentage value as the <code>width</code> value for <code>img</code> doesn't work simply because percentage value resolves to, well, a percentage of its <strong>container size</strong>, not its <strong>original size</strong>. Below, I demonstrated the not-working examples.</p> <p>That being said, I personally usually want to specify the width of the image explicitly. For example, on large devices, I want the image to be 1080px. On smaller devices, I want the image to be 560px. I can simply make a container for the image of an explicit size, place the image inside the container, and specify the image's width to 100% (of its container size).</p> <hr> <h3>What works</h3> <p>As mentioned, there are two ways to make an image 50% of its original width. First, using JS. Second, tell the CSS explicitly the original image width.</p> <ul> <li>Using the JS approach, you simply need to change the width of the image. Upon load, get the intrinsic width of the image, then set the new width to the intrinsic width divided by 2. Simple.</li> <li>Using the telling-CSS-explicitly approach is less advantageous. This solution presumes that the image will always be the same and needs you, the developer, to know the original image size beforehand. When you change the original image size, you will also need to update your code. That being said, you can achieve this by specifying a CSS custom property inside the CSS class, specifying an attribute (in HTML) that gives the intrinsic width then using attr() (still experimental and mostly not supported), or using an <code>intrinsicsize</code> attribute and set the <code>width</code> and <code>style</code> through CSS (still experimental and not supported). The last two solutions, as mentioned, <strong>are not supported by most browsers and may not work properly yet.</strong> </li> </ul> <hr> <p>In my opinion, your best bet to set an image's width to 50% its intrinsic width is by using JS. Here's a solution demonstrating the what-doesn't-work solutions and the JS solution. Aspect ratio is automatically maintained if you only change one of the image's size (width/height).</p> <p></p> <div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false"> <div class="snippet-code"> <pre class="prettyprint snippet-code-js lang-js prettyprint-override"><code>const imageJS = document.querySelector('.image--changed-with-js') imageJS.onload = () => { const intrinsicWidth = imageJS.width imageJS.width = imageJS.width / 2 }</code></pre> <pre class="prettyprint snippet-code-css lang-css prettyprint-override"><code>* { box-sizing: border-box; } body, html { margin: 0px; } img { margin: 20px 0; } /* Image has its intrinsic size (i.e. the original image size) */ .image--original { width: auto; } /* Image contained within a 500px container Image has a width of 50% of 500px = 250px */ .container { width: 500px; } .image--changed-with-container { width: 50%; } /* Image is not contained within a div However, image is inside body <body> is its container It now has a width of 50% of the body NOT 50% of its intrinsic width */ .image--changed-without-container { width: 50%; } /* Image changed using JS You can get the intrinsic size through JS and modify its size there */ .image--changed-with-js {}</code></pre> <pre class="prettyprint snippet-code-html lang-html prettyprint-override"><code><img class="image--original" src="https://img.freepik.com/free-vector/abstract-galaxy-background_1199-247.jpg?size=626&ext=jpg"> <div class="container"> <img class="image--changed-with-container" src="https://img.freepik.com/free-vector/abstract-galaxy-background_1199-247.jpg?size=626&ext=jpg"> </div> <img class="image--changed-without-container" src="https://img.freepik.com/free-vector/abstract-galaxy-background_1199-247.jpg?size=626&ext=jpg"> <img class="image--changed-with-js" src="https://img.freepik.com/free-vector/abstract-galaxy-background_1199-247.jpg?size=626&ext=jpg"></code></pre> </div> </div>

<p>If you set the width to a fixed number of pixels, e.g. <code>img { width: 500px; }</code>, the height will adjust accordingly to maintain the same aspect ratio. If you set the height, the width will adjust accordingly to maintain the same aspect ratio.</p> <p>If you set the width to a percentage, e.g. <code>img { width: 50% }</code>, the browser will assume you mean a percentage of the element's container. The height will adjust accordingly to maintain the same aspect ratio.</p> <p>However, if you set the height to a percentage, e.g. <code>img { height: 50% }</code>, that just won't work for various reasons.</p>

<p>My suugestion is to remove the specified sizes you put. Yes there is a code that can be specified in css. in html do like that:</p> <pre class="prettyprint"><code><img src="Debian.jpg" alt="Debian Image" class="myCustomImages"> </code></pre> <p>in css do something like that:</p> <pre class="prettyprint"><code>.myCustomImages { max-width: 50%; max-height: 50%; } </code></pre>

Scale HTML image width and height in %

Tags:

javascript

html

css

image

I know that width and height property of HTML images can be set simply by <img src="Debian.jpg" style="height: 120px; width: 130px">.

What I am looking for is if there exists a single CSS property that takes only one value in % and scales the width and height of the original image according to that percentage. For example, if the height and width of Debian.jpg are 1000x700 and I specify 50% in that CSS property then the image scales down to 500x350 and hence the aspect ratio is maintained.

It's very hard for me to maintain the aspect ratio of the image while adjusting the height and width separately. If a property like that does not exist then is there any way to maintain the aspect ratio and achieve desirable dimensions of the image?

801

asked May 04 '20 05:05

Arun Suryan

5 Answers

Yes, there is a way to maintain the image's aspect ratio and resize the image to a fraction of its original size. However, CSS cannot know the intrinsic size (the original size) of the image. Therefore, you can only do two things:

Tell the CSS explicitly the original size
Use JS to get the original size upon image load

What doesn't work

Using percentage value as the width value for img doesn't work simply because percentage value resolves to, well, a percentage of its container size, not its original size. Below, I demonstrated the not-working examples.

That being said, I personally usually want to specify the width of the image explicitly. For example, on large devices, I want the image to be 1080px. On smaller devices, I want the image to be 560px. I can simply make a container for the image of an explicit size, place the image inside the container, and specify the image's width to 100% (of its container size).

What works

As mentioned, there are two ways to make an image 50% of its original width. First, using JS. Second, tell the CSS explicitly the original image width.

Using the JS approach, you simply need to change the width of the image. Upon load, get the intrinsic width of the image, then set the new width to the intrinsic width divided by 2. Simple.
Using the telling-CSS-explicitly approach is less advantageous. This solution presumes that the image will always be the same and needs you, the developer, to know the original image size beforehand. When you change the original image size, you will also need to update your code. That being said, you can achieve this by specifying a CSS custom property inside the CSS class, specifying an attribute (in HTML) that gives the intrinsic width then using attr() (still experimental and mostly not supported), or using an intrinsicsize attribute and set the width and style through CSS (still experimental and not supported). The last two solutions, as mentioned, are not supported by most browsers and may not work properly yet.

In my opinion, your best bet to set an image's width to 50% its intrinsic width is by using JS. Here's a solution demonstrating the what-doesn't-work solutions and the JS solution. Aspect ratio is automatically maintained if you only change one of the image's size (width/height).

const imageJS = document.querySelector('.image--changed-with-js')

imageJS.onload = () => {
  const intrinsicWidth = imageJS.width
  imageJS.width = imageJS.width / 2
}

* {
  box-sizing: border-box;
}

body,
html {
  margin: 0px;
}

img {
  margin: 20px 0;
}

/* Image has its intrinsic size (i.e. the original image size) */
.image--original {
  width: auto;
}

/* Image contained within a 500px container
 Image has a width of 50% of 500px = 250px */
.container {
  width: 500px;
}

.image--changed-with-container {
  width: 50%;
}

/* Image is not contained within a div
However, image is inside body
<body> is its container
It now has a width of 50% of the body
NOT 50% of its intrinsic width */
.image--changed-without-container {
  width: 50%;
}

/* Image changed using JS
You can get the intrinsic size through JS and modify its size there */
.image--changed-with-js {}

<img class="image--original" src="https://img.freepik.com/free-vector/abstract-galaxy-background_1199-247.jpg?size=626&ext=jpg">

<div class="container">
  <img class="image--changed-with-container" src="https://img.freepik.com/free-vector/abstract-galaxy-background_1199-247.jpg?size=626&ext=jpg">
</div>

<img class="image--changed-without-container" src="https://img.freepik.com/free-vector/abstract-galaxy-background_1199-247.jpg?size=626&ext=jpg">

<img class="image--changed-with-js" src="https://img.freepik.com/free-vector/abstract-galaxy-background_1199-247.jpg?size=626&ext=jpg">

168

answered Oct 22 '22 06:10

Richard

If you set the width to a fixed number of pixels, e.g. img { width: 500px; }, the height will adjust accordingly to maintain the same aspect ratio. If you set the height, the width will adjust accordingly to maintain the same aspect ratio.

If you set the width to a percentage, e.g. img { width: 50% }, the browser will assume you mean a percentage of the element's container. The height will adjust accordingly to maintain the same aspect ratio.

However, if you set the height to a percentage, e.g. img { height: 50% }, that just won't work for various reasons.

answered Oct 22 '22 08:10

kmoser

The solution is really simple. To preserve the aspect ratio, all you need to do is set the height and width CSS properties like:

#theImage {
  width: 100%;
  height: auto;
}

<img id="theImage" src="https://cdn.pixabay.com/photo/2015/04/23/22/00/tree-736885__340.jpg">

By setting the width property to 100%, you are telling the image to take up all the horizontal space that is available. With the height property set to auto, your image's height changes proportionally with the width to ensure the aspect ratio is maintained. The end result is an image that scales up or down perfectly.

The downside of this solution is that a single image cannot effectively display across the range of resolutions on which your content may be viewed. For a more comprehensive solution, you need to bring in media queries and images of varying sizes to replace a lower resolution image when the time is right

answered Oct 22 '22 08:10

TRK

My suugestion is to remove the specified sizes you put. Yes there is a code that can be specified in css. in html do like that:

<img src="Debian.jpg" alt="Debian Image" class="myCustomImages">

in css do something like that:

.myCustomImages {
  max-width: 50%;
  max-height: 50%;
}

answered Oct 22 '22 07:10

Asma AL-Khaldi

So as I understand, You want to keep the image aspect-ratio while defining it's scale in percentage of the original size. Below is my suggestion:

When the image is inside a container with display: inline-block, you can define a width for an image in css, and it will be relative to itself (if the parent have display: block it will be relative to it's parent, if it's display:inline it will be relative to the nearest block parent).

When you define one of the dimentions (width or height) and not the other, by default it's keep the aspect ratio.

So what I suggest to do is wrap the image in an inline-block parent, and define only width in a percentage. like this:

div {
  display: inline-block;
}
#half {
    width: 50%;
}
#original {
    width: 100%;
}
#big {
    width: 150%;
}

<h1>Image 400X267</h1>
<h3>50% size</h3>
<div>
<img id="half" src="https://bloximages.newyork1.vip.townnews.com/unionleader.com/content/tncms/assets/v3/editorial/f/f4/ff44150d-01ca-5e2d-8f7d-9d17e9faadd4/5dfa95339e09c.image.jpg?resize=400%2C267"/>
</div>
<h3>100% size</h3>
<div>
<img id="original" src="https://bloximages.newyork1.vip.townnews.com/unionleader.com/content/tncms/assets/v3/editorial/f/f4/ff44150d-01ca-5e2d-8f7d-9d17e9faadd4/5dfa95339e09c.image.jpg?resize=400%2C267"/>
</div>
<h3>150% size</h3>
<div>
<img id="big" src="https://bloximages.newyork1.vip.townnews.com/unionleader.com/content/tncms/assets/v3/editorial/f/f4/ff44150d-01ca-5e2d-8f7d-9d17e9faadd4/5dfa95339e09c.image.jpg?resize=400%2C267"/>
</div>