html - <img> max-width: 80% and also stick to integer ratio of the original image size - Stack Overflow

admin管理员组

文章数量:1314326

I have JPG images that are 1500px wide, exported with a good resizing algorithm, the edges are crispy. For responsiveness, I'm using:

img { max-width: 80%; }

It looks good on Firefox no matter the size, but blurry on Chrome. How to prevent blur on image resize in Chrome? gives a solution:

img { image-rendering: pixelated; transform: translateZ(0); }   // also tried crisp-edges, -webkit-optimize-contrast, etc.

But then, depending on the image, it's sometimes too crispy (like if a high "sharpen edges" algorithm has been applied, it' really too much).

Now I noticed that if using exactly half the original width (width=750), it's perfect. It seems the same for simple integer ratios of the original size: 1/2, 1/4, 3/4, etc.

Question: is it possible, with CSS rules to ask images to:

• respect a max width of 80%
• and use a width only in a set of preselected possible widths: 375 (one quarter), 500 (one third), 750 (half), etc. automatically decided by the browser (it chooses the biggest possible respecting max-width: 80%;)
• or even better: use a width only in a set of preselect ratio from original img's width: 1/4, 1/3, 1/2, 3/4

This would ensure crisp edges easily.

How to do this in CSS?

本文标签： htmlltimggt maxwidth 80 and also stick to integer ratio of the original image sizeStack Overflow