Image re-size to 50 of original size in HTML

Question

I m trying to re-size a image in HTML  it s got width 314px and height 212px  I want to re-size it to 50       but using this I still get a bigger image instead of a half-size image    lt img src  image jpg  width  50   height  50     gt    What did I do wrong  Thanks   lt html gt       lt head gt       lt title gt  lt  title gt       lt  head gt           lt body gt           lt div gt           lt img src  image4 png  width  50   height  50    gt           lt  div gt       lt  body gt   lt  html gt    I resolved the above problem using jquery below     document  ready function e            var imgs   document getElementsByTagName  img            var imgLength   imgs length           for var i 0  i lt   imgLength-1 i                  var imgWidth   imgs i  clientWidth              var imgHeight   imgs i  clientHeight                  img   eq i  attr  width imgWidth 2  height  imgHeight 2                 console log imgWidth                      console log imgLength

User · Answer

You can use the x descriptor of the srcset attribute as such   x000D   x000D   lt  -- Original image -- gt   lt img src  https   fr wikipedia org static images mobile copyright wikipedia png    gt    lt  -- With a 80  size reduction  1 0 8 1 25  -- gt   lt img srcset  https   fr wikipedia org static images mobile copyright wikipedia png 1 25x    gt    lt  -- With a 50  size reduction  1 0 5 2  -- gt   lt img srcset  https   fr wikipedia org static images mobile copyright wikipedia png 2x    gt  x000D   x000D   x000D   Currently supported by all browsers except IE   caniuse  MDN documentation

User · Answer

You did not do anything wrong here  it will any other thing that is overriding the image size   You can check this working fiddle   And in this fiddle I have alter the image size using    and it is working   Also try using this code    lt img src  image jpg  style  width  50   height  50    gt     Here is the example fiddle

User · Answer

We can do this by css3 too  Try this    halfsize       -moz-transform scale 0 5       -webkit-transform scale 0 5       transform scale 0 5       lt img class  halfsize  src  image4 jpg  gt     subjected to browser compatibility

User · Answer

The percentage setting does not take into account the original image size   From w3schools        In HTML 4 01  the width could be defined in pixels or in   of the containing element  In HTML5  the value must be in pixels    Also  good practice advice from the same source        Tip  Downsizing a large image with the height and width attributes forces a user to download the large image  even if it looks small on the page   To avoid this  rescale the image with a program before using it on a page

[jquery] Image re-size to 50% of original size in HTML

Examples related to jquery

Examples related to html

Examples related to image