Best IT Recipes

Does CSS image size change from itself?

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

Question: can I resize the image with a percentage of myself without using javascript or server? (I do not have direct image size information)

I'm sure you cannot do this, but I just want to see if there is an intelligent CSS-only solution. Thank!

+89
html css image
Dec 06 '11 at 8:26
source share
10 answers

I have 2 methods for you.

Method 1. Demo on jsFiddle

This method resizes the image only visually, not by the actual size in the DOM, but by the visual state after resizing in the middle in the middle of the 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'); }​

Note about browser support : browser statistics are shown as built-in in css .

Method 2. Demonstration 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 are the same image.
Note about browser support: this method will work in all browsers, since all browsers support the css properties used in the method.

The method works as follows:

  1. #wrap and #wrap img.fake have a stream
  2. #wrap has overflow: hidden so its dimensions are identical to the internal image ( img.fake )
  3. img.fake - the only element inside #wrap without absolute positioning, so as not to violate the second step
  4. #img_wrap has absolute positioning inside #wrap and extends to the size of the whole element ( #wrap )
  5. The result of the fourth step is that #img_wrap has the same dimensions as the image.
  6. When setting width: 50% for img.normal , its size is 50% of #img_wrap and therefore 50% of the original image size.
+98
May 25 '12 at 9:40
source share

HTML:

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

CSS:

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

This should be one of the simplest solutions using a container element approach.

When using the container element approach, this question is a variation of this question . The trick is to allow the container element to compress the child image so that it has a size equal to the size of the image without size. Thus, when setting the width property of the image as a percentage, the image is scaled relative to its original scale.

Some of the other properties and property values ​​that support compression are: float: left/right , position: fixed and min/max-width , as mentioned in the related question. Each has its own side effects, but it’s safer to choose display: inline-block . Matt mentioned float: left/right in his answer, but he mistakenly attributed this to overflow: hidden .

Jsfiddle demo



Edit: As the trojan mentioned , you can also use the recently introduced CSS3 internal and external 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 .

+36
Jul 29 '14 at 23:36
source share

Try the zoom property

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

Edit: Apparently, FireFox does not support the zoom property. You must use;

 -moz-transform: scale(0.5);

for firefox.

+10
Dec 6 '11 at 8:40
source share

Another solution is to use:

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

It will not be checked because the src attribute is required, but it works (except for any version of IE, since srcset not supported).

+3
Jan 19 '18 at 21:01
source share

This is indeed possible, and I discovered that it was quite by accident when developing 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%; }

Overflow: hidden gives the size and width of the wrapper, despite the floating content, without using clearfix hack. Then you can post your content using fields. You can even make a div shell an inline block.

+2
May 31 '13 at 7:59
source share

This is a very old topic, but I found it when I was looking for a simple solution to display a high resolution screenshot on a standard resolution screen.

Thus, there is a solution only for HTML for modern browsers:

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

This tells the browser that the image is twice as large as its estimated screen size. The value is proportional and should not reflect the actual size of the image. You can also use 2w 1px to achieve the same effect. The src attribute is used only in older browsers.

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

+2
Apr 02 '18 at 20:31
source share
 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 resizing based only on the image properties, not the parent. It can resize a single image or group based on class parameters and identifier.

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

0
Mar 23 '16 at 18:00
source share

This is not a complicated approach:

 <div> <img src="sample.jpg" /> </div> then in css: div { position: absolute; } img, div { width: ##%; height: ##%; }
0
May 27 '18 at 21:27
source share

In fact, most of the answers here do not really scale the image to the width of itself.

We need to have the width and height of auto for the img element itself, so that we can start with its original size.

After that, the container element can scale the image for us.

A simple HTML example:

 <figure> <img src="your-image@2x.png" /> </figure>

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 can adjust the position of the image using rules such as transform: translate(0%, -50%); ,

0
May 28 '19 at 8:11
source share

I think you're right, it is simply not possible with pure CSS as far as I know (not a cross browser, I mean).

Edit:

Well, I really did not like my answer, so I was a little puzzled. I could find an interesting idea that could help ... perhaps this is possible in the end (although not the most beautiful thing ever):

Edit: Tested and works in Chrome, FF, and IE 8 and 9. It does not 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%; }
-one
May 25 '12 at 9:49
source share


More articles:


All Articles