首页 > 试题广场 >

在移动端开发中，需要实现图片的自适应布局并确保高清屏显示清晰

[单选题]

在移动端开发中，需要实现图片的自适应布局并确保高清屏显示清晰。以下哪种 HTML 属性组合能最精准地解决这个问题？

```
仅使用 srcset 属性
```
```
同时使用 srcset 和 sizes 属性
```
```
仅使用 width:100% 的 CSS 样式
```

使用 picture 元素配合 media 条件

查看答案及解析

DRZv

答案与解析 - 答案：B - 解析： - 要实现移动端图片自适应且高清显示，需同时处理图像分辨率适配和尺寸响应。 srcset 可提供不同分辨率的图像源，确保高清屏清晰； sizes 能定义图片在不同布局下的显示尺寸，两者结合可精准解决问题。 - 选项A仅用 srcset ，无法精准控制图片在页面中的显示尺寸；选项C仅用 width:100% 的CSS样式，不能解决高清屏的图像源选择问题；选项D的 picture 元素配合 media 条件主要用于根据媒体查询选择不同图片（如不同格式或场景），而非针对分辨率和尺寸的精准适配。<!DOCTYPE html> <html> <head> <title>图片自适应示例</title> <style> .img-container { max-width: 600px; margin: 0 auto; } img { width: 100%; height: auto; } </style> </head> <body> <div class="img-container"> <img src="image-400.jpg" srcset="image-400.jpg 400w, image-800.jpg 800w, image-1200.jpg 1200w" sizes="(max-width: 600px) 100vw, 600px" alt="自适应图片" > </div> </body> </html>

编辑于 2025-10-28 22:53:10 回复(0)