图像占位符
使用 HTML 实现图像占位符可以使用以下代码:
<p><img src="https://via.placeholder.com/350x150" alt="placeholder image"></p>
其中,src
属性设置占位符图片的 URL,alt
属性则设置占位符图片的替代文本,以便于屏幕阅读器等工具能够正确识别。
自适应图像大小
如果需要实现自适应图像大小,可以使用以下代码:
<p><img src="https://via.placeholder.com/350x150" alt="placeholder image" style="max-width: 100%; height: auto;"></p>
其中,style
属性设置了 max-width: 100%;
和 height: auto;
,使得图片宽度最大为其父元素宽度,高度自适应变化。这样可以确保图片在不同设备上的显示效果一致。
完整代码
<h3>图像占位符</h3>
<p><img src="https://via.placeholder.com/350x150" alt="placeholder image"></p>
<h3>自适应图像大小</h3>
<p><img src="https://via.placeholder.com/350x150" alt="placeholder image" style="max-width: 100%; height: auto;"></p>
其中,使用 h3
标签设置小标题,使得页面结构更加清晰和易读。