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

Question

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

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

Answer 1

谢邀

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

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

Answer 2

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

Answer 3

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

Answer 4

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

Answer 5

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

Answer 6

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

2. 用background-size: cover做

Answer 7

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

Answer 8

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

Answer 9

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

background-size:contain;

Answer 10

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

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

说明：

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

Answer 11

如果确定以后都是这种高度不够的图片；

img{
    min-width:100%;
    min-height:100%;
    width:auto;
    height:100%;
    position:absolute;
    left:0;
    right:0;
    top:0;
    bottom:0;
    margin:auto;
}
容器{
    position:relative;
    overflow:hidden;
}

可以居中显示;

Answer 12

感觉cover应该不是这样的，另外就是你可以把background-position设置为center center，可能更好看一些；

其他的方法，你可以用js，通过计算容器和图片的宽高配合margin-left,margin-top（负值）来达到你的目标;

再有，修图吧～～～