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!
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.
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%;
}
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.
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="" />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.
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.
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).
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
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.
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.
This is a not-hard approach:
<div>
<img src="sample.jpg" />
</div>
then in css:
div {
position: absolute;
}
img, div {
width: ##%;
height: ##%;
}
Actually most of the answers here doesn't really scale the image to the width of itself.
We need to have a width and height of auto on the img element itself so we can start with it's original size.
After that a container element can scale the image for us.
Simple HTML example:
<div style="position: relative;">
<figure>
<img src="[email protected]" />
</figure>
</div>
And here are the CSS rules. I use an absolute container in this case:
figure {
position: absolute;
left: 0;
top: 0;
-webkit-transform: scale(0.5);
-moz-transform: scale(0.5);
-ms-transform: scale(0.5);
-o-transform: scale(0.5);
transform: scale(0.5);
transform-origin: left;
}
figure img {
width: auto;
height: auto;
}
You could tweak the image positioning with rules like transform: translate(0%, -50%);.
Source: Stackoverflow.com