Question

我创建了一个图片滑块，但我遇到了一个问题。我希望图像的宽度是屏幕的整个宽度;我完成了这个。但是，我的图片＆＃39;高度超过屏幕高度的100％。我希望高度约为屏幕的50-70％（最好是50％）。我尝试将height: 70vh;添加到我的图片中，但这没有帮助。

有人可以建议一些帮助吗？

可以在http://realtorcatch.com/slider3

查看我的滑块

我的代码是：

* {
    padding: 0;
    margin: 0;
}
body {
    font-family: Sans-Serif;
}
img {
    max-width: 100%;
    /*height: 70vh;*/
}
.cycle-slideshow {
    width: 100%;
    display: block;
    position: relative;
    margin: 0 auto;
}
.cycle-prev, .cycle-next {
    font-size: 200%;
    color: #FFF;
    display: block;
    position: absolute;
    top: 50%;
    margin-top: -10px;
    z-index: 999;
    cursor: pointer;
}
.cycle-prev {
    left: 10%;
}
.cycle-next {
    right: 10%;
}
.cycle-pager {
    width: 100%;
    text-align: center;
    display: block;
    position: absolute;
    bottom: 20px;
    z-index: 999;
    cursor: pointer;
}
.cycle-pager span {
    text-indent: 100%;
    white-space: nowrap;
    width: 12px;
    height: 12px;
    display: inline-block;
    border: 1px solid #FFF;
    border-radius: 50%;
    margin: 0 10px;
    overflow: hidden;
}
.cycle-pager .cycle-pager-active {
    background-color: #FFF;
}
<div class="cycle-slideshow">
    <span class="cycle-prev">&#9001;</span>
    <span class="cycle-next">&#9002;</span>
    <span class="cycle-pager"></span>
    <img src="images/subway.jpg" alt="subway">
    <img src="images/beach.jpg" alt="beach">
    <img src="images/space.jpg" alt="space">
</div>

Answer 1

在img声明中，而不是max-width将width设置为100％，将height设置为70vh。如果您想要更多种类的高度，请尝试将min-height设置为50vh，将max-height设置为70vh。

请注意，这会使您的图像歪斜并使它们看起来不成比例。

替代解决方案：

创建一个＆＃34;平纹棉麻织物＆＃34;。通过这个，我的意思是创建一个覆盖页面下半部分的框。实际上，您可以使用包装器中的伪元素执行此操作：

.cycle-slideshow {
    position: relative;
    ...
}

.cycle-slideshow:after {
    content: '';
    width: 100%;
    height: 50%; //50% of parent element
    background-color: white;
    position: absolute;
    top: 50%;
    left: 0;
    z-index: 2;
}

Answer 2

将img的样式更改为img {width：100％;身高：100vh;}

它适合你。谢谢。

Answer 3

试试这个，希望它会对你有帮助。

var vHeight = $(window).height()/2,  // for 50%
vWidth = $(window).width(),

如何使图像成为屏幕的整个宽度，指示高度

3 个答案: