Resize CSS 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:
. 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.

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
element directly in CSS, which should apply to all images in your HTML document, displayed via the

You could specify:

img {width:200%;}

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

Hello, buddy!稿源:Hello, buddy! (源链) | 关于 | 阅读提示

本站遵循[CC BY-NC-SA 4.0]。如您有版权、意见投诉等问题,请通过eMail联系我们处理。
酷辣虫 » 前端开发 » Resize CSS images

喜欢 (0)or分享给?

专业 x 专注 x 聚合 x 分享 CC BY-NC-SA 4.0

使用声明 | 英豪名录