如何用CSS实现图片按原尺寸整数比例缩放且不超80%最大宽度？

针对你遇到的Chrome中图片模糊、image-rendering属性过度锐化的问题，以下是纯CSS实现方案，满足你提出的三个需求：

实现思路 #

利用CSS的min()函数，结合预设的原图片整数比例尺寸，自动选择不超过容器80%宽度的最大合规尺寸，确保图片始终按原尺寸的整数比例缩放，从根源避免缩放模糊。

代码实现 #

方式一：硬编码预设尺寸（直观可控） #

已知原图片宽度为1500px，对应预设比例的尺寸为375px(1/4)、500px(1/3)、750px(1/2)、1125px(3/4)，代码如下：

img {
  /* 取容器80%宽度 和 最大的符合条件的预设尺寸 中的较小值 */
  width: min(80%, 1125px, 750px, 500px, 375px);
  height: auto;
}

方式二：动态比例计算（无需硬编码尺寸） #

通过CSS计算直接生成比例尺寸，更灵活：

:root {
  --original-img-width: 1500px; /* 原图片宽度 */
}

img {
  width: min(
    80%, /* 容器宽度限制 */
    calc(var(--original-img-width) * 3/4),
    calc(var(--original-img-width) * 1/2),
    calc(var(--original-img-width) * 1/3),
    calc(var(--original-img-width) * 1/4)
  );
  height: auto;
}

关键说明 #

• min()函数会按参数顺序从大到小判断，自动选取不超过容器80%宽度的最大预设尺寸。
• 如果图片的父容器是固定宽度的元素，只需确保父容器的宽度约束生效，图片的80%会自动基于父容器计算。
• 这种方案完全不需要image-rendering相关属性，通过严格按原尺寸整数比例缩放，保证Chrome和Firefox都能清晰显示，不会出现过度锐化。

内容的提问来源于stack exchange，提问作者Basj