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

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.

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

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

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

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

Examples related to jquery

Examples related to html

Examples related to image