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

You can do this with the scale() 2D transform, but being one of the flashy new CSS3 features support is incomplete at this time 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 don't believe this takes into account the flow of content, as transforms are done on individual elements and as such do not affect layout. See also the transform-origin property.

If you need good browser support, or you need the content to reflow properly, you'll have to make do with an alternative such as using JavaScript or restructuring your HTML, such that the width and height properties will scale it correctly and affect element flow in a natural way.

You can enclose 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>

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/