javascript - 根据高度计算宽高比宽度

Question

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

我想将图像用作全屏背景，并要求它完全填充视口，而不管尺寸如何，不显示边框。它必须保持其纵横比，我还希望图像始终居中。我知道要实现这一点，一些图像将被裁剪。

我相信如果使图像高度与视口高度匹配并根据图像纵横比计算宽度，这将起作用，但我不确定如何执行此操作。任何人都可以帮忙吗？

提前谢谢了。

Answer 1

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

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

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

Answer 2

如果您不是 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;
}

Answer 3

不是您问题的真正答案，而是一个潜在的替代方案——您是否尝试过min-height/ min-widthCSS 属性？

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裁剪机制，您可以拉伸图像以填充其容器。我已使用此处探索的方法将图像定位在中心。

这似乎适用于我在 Chrome 和 Firefox 上。

*编辑以包含 html/css