How to double an image size in HTML using only CSS?

Question

I have 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 the image is in. If an image is 150px by 150px I want to scale it to 300px by 300px. I want this to work for all images no matter their size or parent tag. And I only want to use CSS. ideas?

Answer 1

You can't using CSS < Version 3 only.

When you set the width/height on an element it is relative to it's container.

---

Update, as it's been quite some time since this answer was posted.

As a commenter points out, this can be achieved by simply using the zoom CSS property. However, it's not recommended, as it was first implemented solely by IE, in the IE6/7 days, and never formalized into the W3C standard. Instead, what's commonly used nowadays is a CSS transform using the scale function.

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

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