扫码关注官方订阅号
我有如上容器,宽高都是固定了,然后我放置了一张大的图片在里面,img设置为max-width:100%; 图片很长,导致这种下面铺不到的问题怎么结局?
拥有18年软件开发和IT教学经验。曾任多家上市公司技术总监、架构师、项目经理、高级软件工程师等职务。 网络人气名人讲师,...
谢邀
你应该调你的图,或你容器的尺寸
为什么?试想: 容器不够高,你又想铺满,那只能拉伸变形咯——但这是你要的结果吗?
这是看你需求的吧,如果你想让图片布满容器,那就再给图片100%的高度咯
background-size: cover; 试试,话说不会变形吧
对于固定高宽, 图片又不规则, 如果不想用js, 还是做成背景, 然后设置background-size: cover比较合适
把图片裁切成跟容器一样宽度的大小
将图片设计成合理的尺寸
用background-size: cover做
background-size: cover
同等宽高比缩放,要想不出现拉伸现象的话,百度找一下等比图片缩放js插件,有专门的js插件,使用特别简单
这个跟窗口的显示方式有关,如果不是自动计算高度的,就只能通过脚本来处理高度了。如果是自动计算高度,调协了图片的 100% 宽之后,其高度应该自动适配
首先图片宽度一定要够宽,其次可以使用
background-size:contain;
以下设置可以满足你的需求。
background-image: url('path/to/img'); background-position: center center; background-repeat: no-repeat; background-size: cover;
说明:
cover 会尽量缩小你的背景图,并百分百的填充p容器。contain 会百分百的确保你的背景图全部展现,这时就会因为图片的高宽比和p容器的高宽比不一样导致没办法百分百填充。
cover
contain
微信扫码关注PHP中文网服务号
QQ扫码加入技术交流群
Copyright 2014-2026 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
PHP学习
技术支持
返回顶部
谢邀
你应该调你的图,或你容器的尺寸
为什么?试想: 容器不够高,你又想铺满,那只能拉伸变形咯——但这是你要的结果吗?
这是看你需求的吧,如果你想让图片布满容器,那就再给图片100%的高度咯
background-size: cover; 试试,话说不会变形吧
对于固定高宽, 图片又不规则, 如果不想用js, 还是做成背景, 然后设置background-size: cover比较合适
把图片裁切成跟容器一样宽度的大小
将图片设计成合理的尺寸
用
background-size: cover做同等宽高比缩放,要想不出现拉伸现象的话,百度找一下等比图片缩放js插件,有专门的js插件,使用特别简单
这个跟窗口的显示方式有关,如果不是自动计算高度的,就只能通过脚本来处理高度了。
如果是自动计算高度,调协了图片的 100% 宽之后,其高度应该自动适配
首先图片宽度一定要够宽,其次可以使用
以下设置可以满足你的需求。
说明:
cover会尽量缩小你的背景图,并百分百的填充p容器。contain会百分百的确保你的背景图全部展现,这时就会因为图片的高宽比和p容器的高宽比不一样导致没办法百分百填充。