How to double image size in HTML using only CSS?

Question

I tried using In HTML:

<img src="../Resources/title.png" /> 

In CSS:

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

But this scales the images based on the parent tag in which the image resides. If the image is 150 pixels by 150 pixels, I want to scale it to 300 pixels by 300 pixels. I want this to work for all images regardless of their size or parent tag. And I want to use only CSS. ideas?

Answer 1

You cannot use CSS <Version 3 only .

When you set the width / height of an element, it is relative to the container.

---

Update , since it has been quite a while since the publication of this answer.

As the commentator notes, this can be achieved simply by using the zoom CSS property. However, it is not recommended , since it was first implemented exclusively by IE, in IE6 / 7 days, and is never executed in the W3C standard . Instead, what is currently commonly used is CSS conversion using the scale function.

More on CSS scale() function: https://developer.mozilla.org/en-US/docs/Web/CSS/transform-function/scale

Example: https://jsfiddle.net/2n5zLhz3/

Answer 2

You can do this with scale() 2D conversion, but while one of the bright new CSS3 features, support is currently incomplete and you need vendor prefixes :

 img { -moz-transform: scale(2); -ms-transform: scale(2); -o-transform: scale(2); -webkit-transform: scale(2); transform: scale(2); } 

However, I do not think that this takes into account the flow of content, since the transformations are performed on individual elements and, as such, do not affect the layout. See Also transform-origin property .

If you need good browser support, or if you want the content to be properly configured, you will have to work with an alternative, for example, using JavaScript or restructuring your HTML so that the width and height properties scale correctly and naturally affect the flow of the element.

Answer 3

You can wrap the image in a div and then set its size relative to the parent.

 <style type="text/css"> .double{ display: inline-block; } .double img{ width: 200%; } </style> <div class="double"><img src="../Resources/title.png"></div> 

Answer 4

You can double the image by taking a percentage of the window size.

 p > img { width:100%; height:60vh; } 

"height: 100vh;" means 100% of your viewport. Need to do the math.