Setting Image Size as Half of Its Own Size(Not The Page Size)

This is an unusual requirement but still required.

We can easily set the image appear in half of the screen width using the following syntax-

<img src="img.jpg" width=50%>

But to set the image appear on screen as half of its own size, use any of the following syntax-

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

OR

<img src="img.jpg" onload="this.width/=2;">

Even more interesting is the use of Bitwise Shift Operator, here is the syntax-

<img src="img.jpg" onload="this.width>>=1;">//For Half of its own width.
<img src="img.jpg" onload="this.width>>=2;">//For 1/4th of its own width.
<img src="img.jpg" onload="this.width<<=1;">//For double of its own width
Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s