Question

My goal is to:
        As the window is resized horizontally:
           the <img> is clipped left and right equally,
           but the height is not changed.
           Expanding/shrinking width from the center -> left/right.

         As the image is zoomed + or -:
           its height is clipped top and bottom equally,
           but its width is not changed.
           Expanding/shrinking height from the middle -> top/bottom.
         and:
           its width behaves just like window resizing above.

         with zooming, the dimensions of the visible area do not change.
           what is showing is zoomed + or -.

我肯定已经看过这里提出的大多数尝试解决方案......它们在窗口调整大小时水平成功，但在缩放时两个方向都失败。

这是我对代码的初步尝试，该代码执行我要求的窗口大小调整，但无法进行缩放。

<div id="headerImage" class="centerImage LoveSongGIF">
</div>

更多代码：

.centerImage {
    display:      block;
    margin-left:  auto;
    margin-right: auto;
}

#headerImage {
    width:  100%;;
    height: 24.125em;       
}

.LoveSongGIF {
    background-attachment: fixed !important;;
    background-color:      white;
    background-image:      url("../images/Love_Song.gif");
    background-repeat:     no-repeat;
    background-position:   center center;

    -webkit-background-size: cover;
    -moz-background-size:    cover;
    -o-background-size:      cover;
    background-size:         cover;
}

Answer 1

为此，请在HTML的head区域中使用以下元标记。

<head>
    <meta name="veiwport" content="width=device-width, intital-scale=1.0">
</head>

这将根据设备屏幕的大小自动设置图像的宽度和高度。它也可以为DOM中的其他元素执行此操作。

响应式图像，水平和垂直

1 个答案: