Question

我目前正在处理的主页上有一个滑块。我试图获得一个占据屏幕整个宽度的完整视口高度。

我目前唯一可以实现此目的的方法是拉伸图像，或者图像不居中。

图像需要大致水平和垂直对齐，因此客户可以在任何宽度的浏览器上看到图像的中心，而不会使图像不成比例地拉伸。

我尝试过背景尺寸：封面;在元素上没有成功，因为它不是一个背景img。容器目前有100vh，但宽度是问题。

问题出在http://joeybox.info/。我意识到菜单和图像上方的徽标100视口高度将停留在“折叠”下，但是一旦我弄清楚了css，我最终将徽标和菜单放在图像上。

我在堆栈溢出论坛中尝试了很多解决方案，在我的场景中没有任何工作。

删除不正确的代码后，我当前的css为： -

.bx-wrapper img {display: inherit;
    height: 100vh;
    max-width: inherit;}

.ewic-wid-imgs {height: 100vh;
    max-width: unset;
    width: unset;}

.bx-wrapper img {display: inherit;
    height: 100vh;
    max-width: inherit;}

HTML =

<div class="slider-box">
    <div id="ewic-con-385">
    <div style="display: none;" id="preloader-385" class="sliderpreloader">
    </div>
    <div style="max-width: 100%; margin: 0px auto;" class="bx-wrapper">
    <div style="width: 100%; overflow: hidden; position: relative; height: 633px;" class="bx-viewport">
    <ul style="width: 315%; position: relative; left: 0px;" class="bxslider-385">
    <li style="float: left; list-style: outside none none; position: relative; width: 1349px; margin-right: 10px;" class="ewic-slider bx-clone">
    <img title="Qw Direct Leather Keyrings" class="ewic-wid-imgs" src="http://joeybox.info/wp-content/uploads/2015/07/qw-direct-leather-keyrings.jpg">
    <div class="ewic-caption"><span>Qw Direct Leather Keyrings</span></div>
    </li><li style="float: left; list-style: outside none none; position: relative; width: 1349px; margin-right: 10px;" class="ewic-slider">
    <img title="Qw Direct Leather Keyrings" class="ewic-wid-imgs" src="http://joeybox.info/wp-content/uploads/2015/07/qw-direct-leather-keyrings.jpg">
    <div class="ewic-caption"><span>Qw Direct Leather Keyrings</span>
    </div></li><li style="float: left; list-style: outside none none; position: relative; width: 1349px; margin-right: 10px;" class="ewic-slider bx-clone">
    <img title="Qw Direct Leather Keyrings" class="ewic-wid-imgs" src="http://joeybox.info/wp-content/uploads/2015/07/qw-direct-leather-keyrings.jpg"><div class="ewic-caption">
    <span>Qw Direct Leather Keyrings</span>
    </div></li></ul></div>
    <div class="bx-controls bx-has-controls-direction bx-has-controls-auto">
    <div class="bx-controls-direction"><a class="bx-prev disabled" href="">Prev</a>
    <a class="bx-next disabled" href="">Next</a></div><div class="bx-controls-auto"><div class="bx-controls-auto-item"><a class="bx-start active" href="">Start</a></div>
    <div class="bx-controls-auto-item"><a class="bx-stop" href="">Stop</a></div></div></div></div><br>
</div>
</div>

Answer 1

要实现这一目标，您可以在.bx-wraper中添加图像：

.bx-wrapper img {
  display: inherit;
  position:absolute;
  left:0;
  right:0;
  top:0;
  bottom:0;
  margin:auto;
  max-width: inherit;
}

现在您需要将父li设置为亲属：

.bx-wrapper ul li {
  position:relative;
  width:100%;
  height:100%;
  list-style: none !important;
  margin: 0 !important;
}

并更改您的父级ul：

.bx-wrapper ul{
    width:100%;
}

Answer 2

我通过更改图像滑块解决了上述问题。我的新滑块插件（Envoke Supersized）使用背景图片，更容易使用背景尺寸：封面; CSS。虽然在移动宽度上这个完整的视口高度对我的图像看起来不太好，所以我在移动宽度上使用了40vh。

我建议任何人都尝试这样做以确保您的图片是背景图片，或者将滑块替换为静态背景图片以获得较小的浏览器宽度。

视口高度，同时将图像集中在滑块css中

2 个答案: