How do I double the size of an image on a web page?

Question

I have an image, say 320 x 240 pixels in size, which I want to display doubled in size (i.e. 640 x 480 pixels) on a web page. In the past, I have done this by setting width=640 on the img tag.

However, I have just spotted the following in the HTML specification:

The dimension attributes are not intended to be used to stretch the image.

In that case, how do I double the size of an image on a web page without going against what the spec intends?

Answer 1

You can use CSS instead. The two methods that jump to mind are using the width or scale transformation.

E.g. img { width: 640px; }. This will keep the proper aspect ratio without specifying the height.

img {    width: 640px;  }

<img src="http://www.placehold.it/320x240">

E.g. img { transform: scale(2) }

img {    transform-origin: top left;    transform: scale(2);  }

<img src="http://www.placehold.it/320x240">

Answer 2

You can set the dimension of the parent image container

.imageContainer {    width: 640px;    height: 480px;  }    img {    width: 100%;    height: 100%  }

<div class="imageContainer">      <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQqdnZQDnZOOyBGXXB23WS87IAxZ85drC-ylgrqWCqYk2aEh3Vo">  </div>