我目前正在处理的主页上有一个 slider 。我正在尝试实现占据屏幕整个宽度的完整视口(viewport)高度。
我目前能做到这一点的唯一方法是拉伸(stretch)图像,或者图像不居中。
图片需要在水平和垂直方向上大致居中对齐,以便客户可以在浏览器的任何宽度上看到图片的中心,而不会不按比例拉伸(stretch)图片。
我试过 background-size: cover;在元素上没有成功,因为它不是背景 img。容器目前有 100vh,但宽度是个问题。
问题位于此处 http://joeybox.info/ .我意识到图像上方的菜单和 Logo 100 视口(viewport)高度将位于“折叠”下方,但是一旦我弄清楚了 css,我最终会将 Logo 和菜单放在图像上。
我已经尝试了在堆栈溢出论坛中找到的许多解决方案,但没有一个适用于我的场景。
删除不正确的代码后,我当前的 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>
最佳答案
要实现这一点,您可以在 .bx-wraper 中添加到您的图像:
.bx-wrapper img {
display: inherit;
position:absolute;
left:0;
right:0;
top:0;
bottom:0;
margin:auto;
max-width: inherit;
}
现在你需要将父 li
设置为 relative:
.bx-wrapper ul li {
position:relative;
width:100%;
height:100%;
list-style: none !important;
margin: 0 !important;
}
并更改您的父级 ul:
.bx-wrapper ul{
width:100%;
}
关于image - 视口(viewport)高度,同时将图像集中在 slider css 中,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/31405056/