Search code examples
htmlimageresizezoomingscale

CSS resize images


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.


Solution

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