jquery - 使图像垂直响应

Question

我有一个 div，其 height 通过使用一些 JS 设置为窗口高度，以及一个垂直和水平居中的图像。在图像上使用 max-width: 100% 时，我可以在调整宽度大小时缩放图像，但我想知道如何在垂直调整窗口大小时缩放图像。任何有关如何解决此问题的帮助或建议将不胜感激。

编辑:

我傻了。我忘了说我在图片底部写了文字，当你垂直缩放时，文字会与图片重叠。我试图通过垂直缩放图像来解决这个问题。

HTML:

<div class="main">
    <img class="img-resp img" src="path/to/img.jpg">

    <h1>Big Bold Headline</h1>
</div>

CSS

html,body { height: 100%; }
.main { background: black; position: relative; }
.img-resp { display: block; max-width: 100%; }
.img { position: absolute; top: 50%; left: 50; margin: 0 -100px 0 -100px; }

JS

var windowHeight = $(window).width();

$('.main').height(windowHeight);

Answer 1

像这样尝试-

img {
  max-height: 100%;
  max-width: 100%
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
}

它将仅使用 CSS 使响应式垂直/水平图像居中

另请检查此链接- Vertically align an image inside a div with responsive height