javascript - 关于固定宽高的容器内部放置图片如何铺满的问题
高洛峰
高洛峰 2017-04-11 11:26:36
[JavaScript讨论组]


我有如上容器,宽高都是固定了,然后我放置了一张大的图片在里面,img设置为max-width:100%; 图片很长,导致这种下面铺不到的问题怎么结局?

把图片设为容器的背景,加上cover后,只能显示一部分啊,更挫了

高洛峰
高洛峰

拥有18年软件开发和IT教学经验。曾任多家上市公司技术总监、架构师、项目经理、高级软件工程师等职务。 网络人气名人讲师,...

全部回复(12)
天蓬老师

谢邀

你应该调你的图,或你容器的尺寸

为什么?试想: 容器不够高,你又想铺满,那只能拉伸变形咯——但这是你要的结果吗?

怪我咯

这是看你需求的吧,如果你想让图片布满容器,那就再给图片100%的高度咯

天蓬老师

background-size: cover; 试试,话说不会变形吧

怪我咯

对于固定高宽, 图片又不规则, 如果不想用js, 还是做成背景, 然后设置background-size: cover比较合适

迷茫

把图片裁切成跟容器一样宽度的大小

迷茫
  1. 将图片设计成合理的尺寸

  2. background-size: cover

ringa_lee

同等宽高比缩放,要想不出现拉伸现象的话,百度找一下等比图片缩放js插件,有专门的js插件,使用特别简单

PHPz

这个跟窗口的显示方式有关,如果不是自动计算高度的,就只能通过脚本来处理高度了。
如果是自动计算高度,调协了图片的 100% 宽之后,其高度应该自动适配

高洛峰

首先图片宽度一定要够宽,其次可以使用

background-size:contain;
PHPz

以下设置可以满足你的需求。

background-image: url('path/to/img');
background-position: center center;
background-repeat: no-repeat;
background-size: cover;

说明:

cover 会尽量缩小你的背景图,并百分百的填充p容器。
contain 会百分百的确保你的背景图全部展现,这时就会因为图片的高宽比和p容器的高宽比不一样导致没办法百分百填充。

热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送

Copyright 2014-2026 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号