本文介绍了如何利用 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项目。