css - css 中 max-width:100% 时图像分辨率很差 - 缩小
问题描述
如何修复 CSS 以便在缩小时不会丢失分辨率?
这是HTML:
<span class="image main small"><img src="images/example.png" alt="" /></span>
用于<img>
:
.image.main img {
width: 100%;
}
.image img {
border-radius: 0px;
display: block;
}
用于<span>
:
.image.small {
padding: 2.5em 6em 0.8em 6em;
max-width: 100%;
}
.image.main {
display: block;
margin: 0 0 1.5em 0;
max-width: 100%;
}
.image {
border-radius: 4px;
border: 0;
display: inline-block;
position: relative;
}
(有多个类,因为原始代码来自模板,我只是对其进行修改。如果您知道如何使这更简单,请告诉我!)
演示的屏幕截图如下。注意图像分辨率有多差。原始的 example.png 非常清晰,分辨率很高。
我也看过一个Similar Question Here,但没有太大帮助。
我也尝试使用Picturefill,我无法完全理解如何在我的情况下使用它。
解决方案
也许是关于纵横比。通过height: auto
在图像上使用一个,这将解决这个问题。给容器,在这种情况下,<span>
最大宽度为 100%,然后将图像的宽度设置为您想要的。现在图像将具有正确的宽度/高度比。
/*
<span class="image main small"><img src="images/example.png" alt="" /></span>
*/
.image {
display: inline-block;
position: relative;
border-radius: 4px;
line-height: 1;
}
.image.main {
display: block;
max-width: 100%;
margin: 0 0 1.5em 0;
}
.image.small {
max-width: 100%;
padding: 2.5em 6em 0.8em 6em;
}
.image img {
width: 100%;
height: auto;
border: 0;
border-radius: 4px;
}
.image.main img {
width: 100%;
}
推荐阅读
- mysql - MySQL随着时间的推移价格变化最大
- c# - 使用 PlayerPrefs 浮动使数组的某个元素可交互,同时所有 +1 元素保持锁定
- c - C99中的打印输出异常
- sql - 使用许多键在 PostgreSQL 中透视表
- safari - 日期时间选择器未在 UIWebView 中显示
- kubernetes - Deployment 中的 Pod 无法完成就绪检查
- json - 使用 JSON 正文调用 RestMethod
- python - Python 如何在下午 4:00 停止此异步功能并在需要时使用 CTRL+C 取消?
- python - 如何安全地将 ADLS Gen 2 连接到 AKS Web 服务?
- php - PHP - 基于post变量动态创建sql语句