首页 文章

根据高度计算apsect比宽度

提问于
浏览
0

我有一个内联img,它是1280(w)x 1024(h)并包含在div中 . div的尺寸设置为视口的100%(w / h),并且隐藏了溢出 .

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

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

提前谢谢了 .

3 回答

  • 0

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

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

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

  • 0

    如果你不是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;
    }
    
  • 0

    不是你的问题的答案,而是一个潜在的替代方案 - 你试过 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-wrapperwidth/height 设置为 100% ,这将匹配父级的宽度和高度 . 使用 overflow: hidden 作为裁剪机制,然后可以拉伸图像以填充图像's container. I'已将图像定位在中心,并使用方法探索here .

    这似乎适用于Chrome和Firefox .

    *编辑包括html / css

相关问题