响应式图像，无需裁剪答案

【问题标题】：Responsive image without cropping响应式图像，无需裁剪
【发布时间】：2016-04-08 07:45:45
【问题描述】：

我有两种全屏主页，一种使用视频，另一种使用图像。我希望图像调整大小保持宽高比收音机始终尊重屏幕的大小。

全屏视频模板对我来说很好用。我正在使用下面的代码：

<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

【问题讨论】：

标签： html css image canvas resize

【解决方案1】：

不要使用<img>，而是尝试使用background-image，如下所示：

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

将此类用于您的<div>。

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

有关更多背景尺寸信息，请参阅http://www.w3schools.com/cssref/css3_pr_background-size.asp。

【讨论】：

【解决方案2】：

尝试使用图像的 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;属性根据内容调整图像大小并调整自身大小。

【讨论】：

谢谢，但我正在使用width:100%; height: 100%;