Menu
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?
461
If you want to make an image larger:Change the scale % to something over a hundred. For example if you want a picture to be double the size then set it to 200%. For example if you have an image that is 800 x 800 pixels, and you scale it to 200% then it will come out as 1600 x 1600.
One of the simplest ways to resize an image in the HTML is using the height and width attributes on the img tag. These values specify the height and width of the image element. The values are set in px i.e. CSS pixels.
There is no command for changing an image size. Image dimensions are 'properties' which can be expressed in either the HTML <img> element, as width="150" height="100" attributes in the tag; or, the CSS as style rules applying to specific images.
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">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>If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
