我有一个内联img,它是1280(w)x 1024(h)并包含在div中 . div的尺寸设置为视口的100%(w / h),并且隐藏了溢出 .
我想将图像用作全屏背景,并且要求它完全填充视口,而不管没有显示边框的尺寸 . 它必须保持其宽高比,我也希望图像始终居中 . 我知道要实现这一目标,一些图像将被裁剪 .
我相信如果使图像高度与视口高度匹配并根据图像宽高比计算宽度,这将有效,但我不确定如何做到这一点 . 有人可以帮忙吗?
提前谢谢了 .
使用backstretch http://srobbin.com/jquery-plugins/backstretch/
$("#demo").backstretch("http://urltoimage.jpg");'
将#demo设置为100/100%宽度和高度
如果你不是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; }
不是你的问题的答案,而是一个潜在的替代方案 - 你试过 min-height / min-width CSS属性吗?
min-height
min-width
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 作为裁剪机制,然后可以拉伸图像以填充图像's container. I'已将图像定位在中心,并使用方法探索here .
.container
vw/wh
.image-wrapper
width/height
100%
overflow: hidden
这似乎适用于Chrome和Firefox .
*编辑包括html / css
3 回答
使用backstretch http://srobbin.com/jquery-plugins/backstretch/
将#demo设置为100/100%宽度和高度
如果你不是100%使用img标签,你可以执行以下操作:
HTML
CSS
不是你的问题的答案,而是一个潜在的替代方案 - 你试过
min-height
/min-width
CSS属性吗?HTML:
CSS:
小提琴:https://jsfiddle.net/mkjoyep1/
在示例中,
.container
(您的全宽度/高度div)填充页面宽度vw/wh
,.image-wrapper
将width/height
设置为100%
,这将匹配父级的宽度和高度 . 使用overflow: hidden
作为裁剪机制,然后可以拉伸图像以填充图像's container. I'已将图像定位在中心,并使用方法探索here .这似乎适用于Chrome和Firefox .
*编辑包括html / css