本文介绍了如何利用 css 媒体查询，根据屏幕尺寸动态切换网页中显示的图片。通过使用不同的 css 类名和 display 属性，可以轻松实现图片在不同分辨率下的自适应显示，从而提升用户体验。
在响应式网页设计中，经常需要根据不同的屏幕尺寸展示不同的图片，以优化用户体验。例如，在桌面端显示高分辨率图片，而在移动端显示低分辨率图片，可以减少加载时间和流量消耗。CSS 媒体查询提供了一种便捷的方法来实现这一目标。
实现方法
核心思路是：在HTML中放置两张图片，分别赋予不同的CSS类名，然后通过媒体查询控制它们的显示与隐藏。
HTML 结构
立即学习“前端免费学习笔记（深入）”；
首先，在HTML代码中，将两张图片放置在同一个容器内，并分别赋予不同的类名，例如 bigscreen 和 smallscreen：
<div class="right"> <img alt="" class="bigscreen" src="image1.png" /> <img alt="" class="smallscreen" src="image2.png" /> </div>
image1.png 是用于较大屏幕的图片，image2.png 是用于较小屏幕的图片。
CSS 样式
接下来，在CSS样式表中，初始状态下，让 bigscreen 图片显示，smallscreen 图片隐藏：
.bigscreen {
display: block;
width: 100%; /* 可选：设置图片宽度 */
object-fit: contain; /* 可选：设置图片显示方式 */
}
.smallscreen {
display: none;
width: 100%; /* 可选：设置图片宽度 */
object-fit: contain; /* 可选：设置图片显示方式 */
}然后，使用媒体查询，在特定屏幕尺寸下，切换图片的显示状态。例如，当屏幕宽度小于或等于 800px 时，隐藏 bigscreen 图片，显示 smallscreen 图片：
@media only screen and (max-width: 800px) {
.bigscreen {
display: none;
}
.smallscreen {
display: block;
}
}完整示例
将以上代码整合在一起，就是一个完整的示例：
<!DOCTYPE html>
<html>
<head>
<title>Responsive Images</title>
<style>
.bigscreen {
display: block;
width: 100%;
object-fit: contain;
}
.smallscreen {
display: none;
width: 100%;
object-fit: contain;
}
@media only screen and (max-width: 800px) {
.bigscreen {
display: none;
}
.smallscreen {
display: block;
}
}
</style>
</head>
<body>
<div class="right">
<img alt="" class="bigscreen" src="image1.png" />
<img alt="" class="smallscreen" src="image2.png" />
</div>
</body>
</html>注意事项
- 确保 image1.png 和 image2.png 存在，并且路径正确。
- 根据实际需求调整媒体查询的断点值（例如 max-width: 800px）。
- 可以根据需要添加更多的媒体查询，以适应不同的屏幕尺寸。
- object-fit: contain; 属性用于控制图片如何适应其容器。可以根据需要选择其他值，例如 cover、fill 等。
- 为了更好的用户体验，可以对图片进行优化，例如压缩图片大小、使用 WebP 格式等。
总结
使用 CSS 媒体查询切换图片是一种简单有效的响应式图片处理方法。通过控制图片的显示与隐藏，可以轻松实现不同屏幕尺寸下的图片自适应，从而提升用户体验和网页性能。这种方法易于理解和实现，适用于各种规模的Web项目。
