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:
. 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
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.
Could you just add:
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
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 (
, but not both), retains ratio.
You can style the
element directly in CSS, which should apply to all images in your HTML document, displayed via the
You could specify:
If you want them to be “200% no matter what.”