您好,欢迎来到[编程问答]网站首页   源码下载   电子书籍   软件下载   专题
当前位置:首页 >> 编程问答 >> Web开发 >> (html)关于固定宽高的容器内部放置图片如何铺满的问题

(html)关于固定宽高的容器内部放置图片如何铺满的问题

来源:网络整理     时间:2016/6/7 10:15:05     关键词:图片,关于

关于网友提出的“(html)关于固定宽高的容器内部放置图片如何铺满的问题”问题疑问,本网通过在网上对“(html)关于固定宽高的容器内部放置图片如何铺满的问题”有关的相关答案进行了整理,供用户进行参考,详细问题解答如下:

问题:(html)关于固定宽高的容器内部放置图片如何铺满的问题
描述:


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

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


解决方案1:

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

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

说明:

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

解决方案2:

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

background-size:contain;
解决方案3:

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

解决方案4:

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

解决方案5:

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

  2. background-size: cover

解决方案6:

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

解决方案7:

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

解决方案8:

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

解决方案9:

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

解决方案10:

谢邀

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

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


以上介绍了“(html)关于固定宽高的容器内部放置图片如何铺满的问题”的问题解答,希望对有需要的网友有所帮助。
本文网址链接:http://www.codes51.com/itwd/1574651.html

相关图片

相关文章