本文介绍了如何使用CSS解决网页中图片因尺寸过大导致的横滚动条和图片截断问题。通过响应式技术，图片能根据浏览器窗口大小自动调整，避免了显示异常。文章详细讲解了针对img标签和背景图片的CSS处理方法，包括使用`background-size: cover`确保图片填满容器并按比例缩放，以及通过设置`padding-top`和`margin-top`优化布局，使文字与图片完美结合。
原图：（宽1680px,高1050px）
可是，我们平时做网站的时候当<img src=”***”>中的图片大于可视窗口（viewport）时，就会出现横的滚动条、图片被截断的情况，如下图所示：
这时候我们可以使用响应式技术来解决：
响应式图片就是当浏览器屏幕窗口大小改变时，图片会随着窗口大小的改变而改变，不会出现图片被截断或出现横滚动条。
HTML代码：<body>
<img src="1.jpg" alt=””/>
</body>CSS代码：
img{
width: 100%; /*设定为百分比那就OK*/
max-width: 100%; /*为了保证图片不被拉伸，可加上此CSS属性*/
}效果：
最低0.47元/天 解锁文章
扫一扫
5383
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
