CSS image resize percentage of itself

Question

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  lt body gt  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

User · Answer

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 amp 9    It doesn t work in IE7   jsFiddle example here  html    lt div id  img wrap  gt       lt img id  original img  src  http   upload wikimedia org wikipedia en 8 81 Mdna-standard-edition-cover jpg   gt       lt div id  rescaled img wrap  gt           lt img id  rescaled img  src  http   upload wikimedia org wikipedia en 8 81 Mdna-standard-edition-cover jpg   gt       lt  div gt   lt  div gt    css    img wrap       display  inline-block             position relative          rescaled img wrap       width  50      original img       display  none     rescaled img       width  100       height  100

User · Answer

This is a not-hard approach    lt div gt       lt img src  sample jpg    gt   lt  div gt   then in css  div       position  absolute     img  div      width          height

User · Answer

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

User · Answer

This actually is possible  and I discovered how quite by accident while designing my first large-scale responsive design site    lt div class  wrapper  gt     lt div class  box  gt       lt img src   logo png  alt    gt     lt  div gt   lt  div gt    wrapper   position relative  overflow hidden      box   float left      Note   float right  would work too   box  gt  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

User · Answer

Try zoom property   lt img src       style  zoom  0 5    gt    Edit  Apparently  FireFox doesn t support zoom property  You should use   -moz-transform  scale 0 5     for FireFox

User · Answer

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   lt div style  quot position  relative  quot  gt       lt figure gt          lt img src  quot your-image 2x png quot    gt       lt  figure gt   lt  div gt   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

User · Answer

Another solution is to use    lt img srcset  example png 2x  gt    It won t validate because the src attribute is required  but it works  except on any version of IE because srcset is not supported

User · Answer

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     lt img srcset  image jpg 100w  sizes  50px  src  image jpg   gt    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

User · Answer

HTML    lt span gt       lt img src  example png   gt   lt  span gt    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  amp  extrinsic sizing module   HTML    lt figure gt       lt img src  example png   gt   lt  figure gt    CSS   figure       width  intrinsic    img       width  50       However  not all popular browser versions support it at the time of writing

User · Answer

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   lt img class  quot fake quot  src  quot example png quot    gt   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   lt div id  quot wrap quot  gt       lt img class  quot fake quot  src  quot example png quot    gt       lt div id  quot img wrap quot  gt           lt img class  quot normal quot  src  quot example png quot    gt       lt  div gt   lt  div gt    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

User · Answer

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   x000D   x000D  img       width  50vw    x000D   lt img src      gt  x000D   x000D   x000D

[html] CSS image resize percentage of itself?

Examples related to html

Examples related to css

Examples related to image