Question

我想用jquery（我自己）创建一个全宽度的图片滑块，我想让它在任何尺寸的浏览器中都能很好地扩展，其高度与浏览器窗口的80％相同。高度和调整大小，因为浏览器确实！这是我的HTML：

<body>
<img class="img_slides" src="../images/1.jpg" alt="1.jpg" width="90%"/> 
</body>

但它不起作用，而如果我使用宽度保证高度，我想要的确切事情发生！如果我写的太多了！但是否则我的问题不符合网站的质量，他们无法提交!!

Answer 1

这应该会自动调整图片大小并将其置于页面中心

<div class="wrapper">
  <img class="image" src="#">
</div>


<style type="text/css">
  .wrapper {width: 100%; height: 100%;}
  .image {position:absolute; height: 80%; width:auto; left:0; right:0; top:0; bottom:0; margin:auto}
</style>

//编辑

<body style="width:100%; height:100; margin:0">
  <img class="image" style="position: absolute; height: 80%; width: auto; left: 0; right: 0; top: 0; bottom: 0; margin: auto;" src="url.jpg">
</body>

Answer 2

Codepen e.g.

img {
    height: 80%;
}

body, html {
    height: 100%;
}

您需要将body & html height设置为100%，因为默认情况下他们不会占据视口的100％。没有它，将图片height设置为80%将无法正常工作。

img height占浏览器窗口的百分比

2 个答案: