Question

有什么方法可以让这个网页上的这些图片自己调整大小以适应浏览器窗口缩小时的浏览器高度？

我已经尝试过提供图像max-width:100%; height:auto;，但它似乎没有用。

如您所见，此网页上的主滑块设置为高度：自动，图像会随着屏幕分辨率的变化而缩小。

我需要做的就是让上面的图像调整大小以适应高度。

感谢。

这是我一直在努力的网站：http://ike.co.kr/English/main.html

Answer 1

方法1：您可以使用视口高度单位^（*） vh，其中100vh大致等于完整窗口高度

JS Fiddle 1

body{
  padding:0; margin:0;
}
.full-height{
  height:100vh;
}

<img class="full-height" src="http://i.stack.imgur.com/IxUiR.png">

方法2：由于在大多数情况下缺少支持-IE - 对于视口单元，您可以使用height:100%但html 1}}和body必须有一个height:100%：

JS Fiddle 2

html, body{
  padding:0;
  margin:0;
  height:100%; /* this is mandatory to get the full height for children */
}
.full-height{
  height:100%;
}

<img class="full-height" src="http://i.stack.imgur.com/IxUiR.png">

方法3：如果您不喜欢CSS，或者由于某些原因它不适合您，使用jQuery：

JS Fiddle 3

var winH = $(window).height();
$('#full-height').css({'height': winH});

body{ padding:0; margin:0; }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<img id="full-height" src="http://i.stack.imgur.com/IxUiR.png">

----------------------------------------------- --------------------------------

^（*）资源：

Answer 2

我检查你的代码，只需将jQuery放在脚本标记下面。

$(document).ready(function () {
    $(".main_thumbnail img").css('height',($(window).height()/4))
}
$(window).resize(function () {
    $(".main_thumbnail img").css('height',($(window).height()/4))
}

希望这会对你有所帮助。

有没有办法可以在浏览器高度变化时调整图像大小？

2 个答案:

----------------------------------------------- --------------------------------