CSS image resize percentage of itself?

Html Problem Overview

I am trying to resize an img with a percentage of itself. For example, I just want to shrink the image by half by resizing it to 50%. But applying width: 50%; will resize the image to be 50% of the container element (the parent element which maybe the <body> for example).

Question is, can I resize the image with a percentage of itself without using javascript or server side? (I have no direct information of the image size)

I am pretty sure you cannot do this, but I just want to see whether there are intelligent CSS only solution. Thanks!

Html Solutions

Solution 1 - Html

I have 2 methods for you.

Method 1. demo on jsFiddle

This method resize image only visual not it actual dimensions in DOM, and visual state after resize centered in middle of original size.

html:

<img class="fake" src="example.png" />

css:

img {
  -webkit-transform: scale(0.5); /* Saf3.1+, Chrome */
     -moz-transform: scale(0.5); /* FF3.5+ */
      -ms-transform: scale(0.5); /* IE9 */
       -o-transform: scale(0.5); /* Opera 10.5+ */
          transform: scale(0.5);
             /* IE6–IE9 */
             filter: progid:DXImageTransform.Microsoft.Matrix(M11=0.9999619230641713, M12=-0.008726535498373935, M21=0.008726535498373935, M22=0.9999619230641713,SizingMethod='auto expand');
}

Browser support note: browsers statistics showed inline in css.

Method 2. demo on jsFiddle

html:

<div id="wrap">
    <img class="fake" src="example.png" />
    <div id="img_wrap">
        <img class="normal" src="example.png" />
    </div>
</div>

css:

#wrap {
    overflow: hidden;
    position: relative;
    float: left;
}

#wrap img.fake {
    float: left;
    visibility: hidden;
    width: auto;
}

#img_wrap {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
}

#img_wrap img.normal {
    width: 50%;
}

Note: img.normal and img.fake is the same image.
Browser support note: This method will work in all browsers, because all browsers support css properties used in method.

The method works in this way:

#wrap and #wrap img.fake have flow
#wrap has overflow: hidden so that its dimensions are identical to inner image (img.fake)
img.fake is the only element inside #wrap without absolute positioning so that it doesn't break the second step
#img_wrap has absolute positioning inside #wrap and extends in size to the entire element (#wrap)
The result of the fourth step is that #img_wrap has the same dimensions as the image.
By setting width: 50% on img.normal, its size is 50% of #img_wrap, and therefore 50% of the original image size.

Solution 2 - Html

HTML:

<span>
    <img src="example.png"/>
</span>

CSS:

span {
    display: inline-block;
}
img {
    width: 50%;
}

This has got to be one of the simplest solutions using the container element approach.

When using the container element approach, this question is a variation of this question. The trick is to let the container element shrinkwrap the child image, so it will have a size equal to that of the unsized image. Thus, when setting width property of the image as a percentage value, the image is scaled relative to its original scale.

Some of the other shrinkwrapping-enabling properties and property values are: float: left/right, position: fixed and min/max-width, as mentioned in the linked question. Each has its own side-effects, but display: inline-block would be a safer choice. Matt has mentioned float: left/right in his answer, but he wrongly attributed it to overflow: hidden.

Demo on jsfiddle

Edit: As mentioned by trojan, you can also take advantage of the newly introduced CSS3 intrinsic & extrinsic sizing module:

HTML:

<figure>
    <img src="example.png"/>
</figure>

CSS:

figure {
    width: intrinsic;
}
img {
    width: 50%;
}

However, not all popular browser versions support it at the time of writing.

Solution 3 - Html

Please note that this answer is 10+ years old and outdated.

Try zoom property

<img src="..." style="zoom: 0.5" />

Edit: Apparently, FireFox doesn't support zoom property. You should use;

-moz-transform: scale(0.5);

for FireFox.

Solution 4 - Html

Another solution is to use:

<img srcset="example.png 2x">

It won't validate because the src attribute is required, but it works (except on any version of IE because srcset is not supported).

Solution 5 - Html

This is a very old thread but I found it while searching for a simple solution to display retina (high res) screen capture on standard resolution display.

So there is an HTML only solution for modern browsers :

<img srcset="image.jpg 100w" sizes="50px" src="image.jpg"/>

This is telling the browser that the image is twice the dimension of it intended display size. The value are proportional and do not need to reflect the actual size of the image. One can use 2w 1px as well to achieve the same effect. The src attribute is only used by legacy browsers.

The nice effect of it is that it display the same size on retina or standard display, shrinking on the latter.

Solution 6 - Html

This actually is possible, and I discovered how quite by accident while designing my first large-scale responsive design site.

<div class="wrapper">
  <div class="box">
    <img src="/logo.png" alt="">
  </div>
</div>

.wrapper { position:relative; overflow:hidden; }

.box { float:left; } //Note: 'float:right' would work too

.box > img { width:50%; }

The overflow:hidden gives the wrapper height and width, despite the floating contents, without using the clearfix hack. You can then position your content using margins. You can even make the wrapper div an inline-block.

Solution 7 - Html

function shrinkImage(idOrClass, className, percentShrinkage){
'use strict';
    $(idOrClass+className).each(function(){
        var shrunkenWidth=this.naturalWidth;
        var shrunkenHeight=this.naturalHeight;
        $(this).height(shrunkenWidth*percentShrinkage);
        $(this).height(shrunkenHeight*percentShrinkage);
    });
};

$(document).ready(function(){
    'use strict';
     shrinkImage(".","anyClass",.5);  //CHANGE THE VALUES HERE ONLY. 
});

This solution uses js and jquery and resizes based only on the image properties and not on the parent. It can resize a single image or a group based using class and id parameters.

for more, go here: https://gist.github.com/jennyvallon/eca68dc78c3f257c5df5

Solution 8 - Html

Although it does not answer the question directly, one way to scale images is relative to the size (especially width) of the viewport, which is mostly the use case for responsive design. No wrapper elements needed.

img {
    width: 50vw;
}

<img src="" />

Solution 9 - Html

I think you are right, it's just not possible with pure CSS as far as I know (not cross-browser I mean).

Edit:

Ok I didn't like my answer very much so I puzzled a little. I might have found an interesting idea which could help out.. maybe it IS possible after all (although not the prettiest thing ever):

Edit: Tested and working in Chrome, FF and IE 8&9. . It doesn't work in IE7.

jsFiddle example here

html:

<div id="img_wrap">
    <img id="original_img" src="http://upload.wikimedia.org/wikipedia/en/8/81/Mdna-standard-edition-cover.jpg"/>
    <div id="rescaled_img_wrap">
        <img id="rescaled_img" src="http://upload.wikimedia.org/wikipedia/en/8/81/Mdna-standard-edition-cover.jpg"/>
    </div>
</div>

css:

#img_wrap {
    display: inline-block;       
    position:relative;    
}
      
#rescaled_img_wrap {
    width: 50%;
}
#original_img {
    display: none;
}
#rescaled_img {
    width: 100%;
    height: 100%;
}

Solution 10 - Html

This is a not-hard approach:

<div>
    <img src="sample.jpg" />
</div>

then in css:
div {
    position: absolute;
}

img, div {
   width: ##%;
   height: ##%;
}

Content Type	Original Author	Original Content on Stackoverflow
Question	Min Ming Lo	View Question on Stackoverflow
Solution 1 - Html	Vladimir Starkov	View Answer on Stackoverflow
Solution 2 - Html	user3829636	View Answer on Stackoverflow
Solution 3 - Html	Emir Akaydın	View Answer on Stackoverflow
Solution 4 - Html	benface	View Answer on Stackoverflow
Solution 5 - Html	Max_B	View Answer on Stackoverflow
Solution 6 - Html	Matt	View Answer on Stackoverflow
Solution 7 - Html	Jenny Vallon	View Answer on Stackoverflow
Solution 8 - Html	Patronaut	View Answer on Stackoverflow
Solution 9 - Html	Wesley	View Answer on Stackoverflow
Solution 10 - Html	nickthehero	View Answer on Stackoverflow