響應圖像不裁剪

Question

我有兩種全屏主頁，一種使用視頻，另一種使用圖像。 我希望兩個圖像都調整大小，以保持寬高比始終保持屏幕尺寸。

全屏視頻模板對我來說很好用。 我正在使用以下代碼：

<div style="background-color: #000000;
            width: 100%;
            height: 100%;
            z-index: 997;
            position: fixed;
            top: 0;
            left: 0;">
<video autoplay poster="img/jerusalem.jpg" id="bgvid" loop style="
    position: fixed;
    top: 50%;
    left: 50%;
    width: 100%;
    max-height: 100%;
    z-index: 998;
    transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    -moz-transform: translate(-50%, -50%);
    -o-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);">
    <source src="video/jerusalem.webm" type="video/webm">
    <source src="video/jerusalem.mp4" type="video/mp4">
    <source src="video/jerusalem.ogv" type="video/ogg">
</video>
</div>

但是我在使用全屏圖像模板時遇到了麻煩，我已經嘗試使用相同的代碼，但是對我來說不起作用

<div style="background-color: #000000;
            width: 100%;
            height: 100%;
            z-index: 997;
            position: fixed;
            top: 0;
            left: 0;">
    <img src="img/bg1.jpg" style="
    position: fixed;
    top: 50%;
    left: 50%;

    width: 100%;
    max-height: 100%;

    z-index: 998;
    transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    -moz-transform: translate(-50%, -50%);
    -o-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);">
</div>

我已經嘗試使用下面的代碼，但是在這種情況下，圖像不會增加。

max-width: 100%;
max-height: 100%;

有人可以幫我嗎？ ：D

Answer 1

嘗試使用圖像的CSS屬性，即

.imageclass
{
   width:100%
   height: auto;
   background-attachment: fixed;
   background-size: contain; /* or cover , etc  */
   background-position: center;
   background-repeat: no repeat;

}

在上面的CSS中，background-size：contain; 屬性針對內容調整圖像大小並調整其自身大小。

Answer 2

代替使用<img>嘗試使用background-image ，如下所示：

.image_box {
background-image: url("img/bg1.jpg");
background-repeat: no-repeat;
background-position: center;
}

為您的<div>使用此類。

另外，您可以使用background-size: contain/etc...進行拉伸background-size: contain/etc...

有關更多背景尺寸信息，請參考http://www.w3schools.com/cssref/css3_pr_background-size.asp 。