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

Answer 2

你可以试试这个

HTML

var objData = { Category: $('#ddlInsCategory option:selected').val(), ....
var jsonData = JSON.stringify({ objData: objData });

CSS

<div class="main">
    <div class="dummy"></div>
    <div class="img-container">
        <img src="path/to/img.jpg" alt="" />
    </div>
</div>

Answer 3

这是因为您还没有为图片指定宽度或高度，因此请尝试使用此代码。

<!DOCTYPE> 
<html>
<head>
    <title></title>
    <link rel="stylesheet" src="path"/> <!-- this if your use external sheet-->

<style>
  body{
    background-color:pink;
  }
</style>

</head>
<body>

<div style="width:100%;height:auto;">
  <img style="width:100%;height:100%" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSO8LcKZte0hFbIRmnOtoX8FF4L_Ln1oOwMYb_oWQRs2qO8i3W6">
</div>


</body>
</html>

使图像垂直响应

3 个答案: