Question

我有一个内联img，它是1280（w）x 1024（h）并包含在div中。 div的尺寸设置为视口的100％（w / h），并且隐藏了溢出。

我想将图像用作全屏背景，并且要求它完全填充视口，而不管没有显示边框的尺寸。它必须保持其宽高比，我也希望图像始终居中。我知道要实现这一目标，一些图像将被裁剪。

我相信如果使图像高度与视口高度匹配并根据图像宽高比计算宽度，这将起作用，但我不确定如何做到这一点。有人可以帮忙吗？

非常感谢提前。

Answer 1

使用backstretch http://srobbin.com/jquery-plugins/backstretch/

$("#demo").backstretch("http://urltoimage.jpg");'

将#demo设置为100/100％宽度和高度

Answer 2

不是您的问题的答案，而是潜在的替代方案 - 您是否尝试过min-height / min-width CSS属性？

HTML：

   <div class="container">
       <div class="image-wrapper">
           <img src="..." />
       </div>
   </div>

CSS：

.container { 
    width: 100vw;
    height: 100vh;
    background-color: grey;
}

.image-wrapper {
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden;
}

.image-wrapper img {
    position: absolute;
    top: 50%;
    left: 50%;
    min-width: 100%;
    min-height: 100%;
    transform: translateX(-50%) translateY(-50%);
}

小提琴：https://jsfiddle.net/mkjoyep1/

在示例中，.container（您的完整宽度/高度div）填充页面宽度vw/wh，.image-wrapper将width/height设置为100%这将匹配父的宽度和高度。使用overflow: hidden作为裁剪机制，您可以拉伸图像以填充其容器。我已经使用here探索的方法将图像放在中心位置。

这似乎适用于Chrome和Firefox。

*编辑包含html / css

Answer 3

如果你没有100％使用img标签，你可以执行以下操作：

<强> HTML

<div id="background"></div>

<强> CSS

#background {
  background: url('path/to/img.jpg');
  background-size: cover;
  background-position: center center;
  width: 100vw;
  height: 100vh;
}

根据高度计算纵横比宽度

3 个答案: