Question

这是HTML：

<div class="image-container">
  <img src="/path/to/a/image/maybe/bigger/than/screen"/>
</div>

还有LESS：

.image-container{
  width: 100%;
  overflow-x: hidden;
  padding: 0;
  img{
    width: 100%;
    margin: 0 auto;
  }
}

图像大部分是width: 1600px，但高度是unknwon。

屏幕宽度大多小于1600px。

我希望图像即使在小屏幕上也可以显示它的中心部分。图像的高度未知。 容器的高度应该等于图像，作为一个块，让后面的内容不重叠。

当前的LESS无法按预期工作。

Answer 1

将图像设置为具有中心定位的背景。也许是这样的：

body { background:url('PATH/TO/IMAGE') no-repeat center top; }

Answer 2

Sheldon将您的图像设置为css的背景是正确的，但如果您希望图像在屏幕上居中，则需要更多的CSS。基本上是这样的：

.img { 
    height:100%;
    background-image:url(path to image);
    background-position:50% 50%;
    background-size:cover;
    padding:0px;
    margin:0px;
    overflow:hidden;
}

您还可以根据自己的需要调整身高

Answer 3

您需要为父

height

通过添加image

position:absolute

＆＃13;

.image-container {
  width: 100%;
  overflow-x: hidden;
  padding: 0;
  border: 1px solid red;
  position: relative;
  height: 200px;
}
img {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

＆＃13;

<div class="image-container">
  <img src="http://placehold.it/1600x200" />
</div>

＆＃13;

如何让css让图像比屏幕更大？

3 个答案: