CSS resize images

Question

What should I add to the CSS to make all images twice as large? It has to work in Firefox 12. I don't care about the visual quality degradation. The HTML contains the images like this: <img src="foo.png">. All images have different widths and heights, and I want to scale them proportionally: 200% width and 200% height.

I know that I can use an image converter to make the PNGs larger. However, in this question I'm interested in a CSS-only solution.

I know that I could add twice as large width=... height=... to the <img tags, but that would need a modification of the HTML (plus an auto-detection of the existing image sizes), and in this question I'm interested in a CSS-only solution.

Answer 1

You can use the following css3:

-webkit-transform: scale(2);
-moz-transform: scale(2);
-o-transform: scale(2);

Although, the image will be laid out as if it is taking up 100% space (like position:relative;).

Answer 2

It looks like this is not possible in a cross-browser way using CSS only.

Answer 3

Could you just add:

img {max-width:200%;}

to your CSS?

This would be "adaptive," (or is that "responsive?") and would not "force" images to 200% (width), but would allow them to scale, up to and including 200% width, if the viewport is wide enough.

You could remove max- and explicitly "force" the 200% width, which will cause horizontal scroll-bars, if the viewport isn't wide enough.

As i understand it, choosing one or the other (height OR width, but not both), retains ratio.

You can style the <img> element directly in CSS, which should apply to all images in your HTML document, displayed via the <img> tag.

You could specify:

img {width:200%;}

If you want them to be "200% no matter what."

Answer 4

Enable JQuery working in the head section of your page.

<img src="foo.png" ID='scalable'>

$("#scalable").css("width", "200%");
$("#scalable").css("height", "200%");