setting the 50% of original picture width and height using css

Question

is there any way of setting the 50% of original picture width and height using css? for example i have this code:

    <img src="http://content.captive-portal.com/files/ign/movie-news/content/2b.jpg">

I don't specify any width and height in html, but I want it to be 50% of the original height and width. Can I use CSS to do that?

this doesn't work:

img{width:50%; height:50%}

Is there any way to overcome this? Thanks

Answer 1

You can scale the image as described here: CSS image resize percentage of itself?

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');}​

Answer 2

As I said in my comment. Setting width: 50% in CSS will only set the image's width to 50% of its containing element.

You will need to achieve this using JavaScript. jQuery makes it quite straightforward, for example:

$('img').each(function() {  
    var the_width = $(this).width(),
        new_width = Math.round(the_width / 2);
    $(this).width(new_width);
});