Question

这是我的设计代码。问题是我有滑块，其中我根据屏幕尺寸设置了图像尺寸。但我的问题是滑块上滑块重叠的内容。应该发生的事情是在滑块下方的任何屏幕中应该有内容。如果我指定最小图像大小，那么当屏幕尺寸减小时，会留下大量空白。

HTML代码。

<!--slide-part-starts--><div class="slide-part">
    <!--slider-starts--><div class="fadein">
<img style="cursor:pointer" onclick="window.location.href='http://myevio.com/powerock-13600mAh-powerbank.html'" src="BG Slideshow/1.jpg"><!--powerock-->
<img style="cursor:pointer" onclick="window.location.href='http://myevio.com/powerpunch-10500mAh-powerbank.html'" src="BG Slideshow/2.jpg"><!--powerpunch-->
</div><!--slide-ends-->
</div><!--slide-part-ends-->

<!--about-evio-starts--><div class="about-evio">
At EViO, we make tech gear that helps improve productivity,<br />
so that you have more time to do the essential things - living life to the fullest.
</div><!--about-evio-ends-->

CSS

.slide-part{
    width:100%;
    max-width:1600px;
    margin:0 auto;
    min-height:100px;
    height:100%
}

.fadein {
    position:relative; 
    width:100%; 
    max-width:1600px; 
    margin:0 auto; 
    min-height:100px;
    height:100%
}

.fadein img {
    position:absolute; 
    left:0; 
    top:0; 
    height:auto; 
    max-width:100%; 
    width: auto\9;
}

.about-evio{
    width:100%;
    text-align:center;
    padding:50px 0 50px 0;
    border-top:1px solid #000;
    border-bottom:1px solid #000;
    text-align:center;
    min-height:20px;
    background:#fff;
    font-size:1.2em;
    line-height:30px
}

Answer 1

将min-height .slide-part{ width:100%; max-width:1600px; margin:0 auto; min-height:300px; height:100% } .fadein { position:relative; width:100%; max-width:1600px; margin:0 auto; min-height:100px; height:100% } .fadein img { position:absolute; left:0; top:0; height:auto; max-width:100%; width: auto\9; } .about-evio{ width:100%; text-align:center; padding:50px 0 50px 0; border-top:1px solid #000; border-bottom:1px solid #000; text-align:center; min-height:20px; background:#fff; font-size:1.2em; line-height:30px }更改为滑块图像高度

参见此示例

＆＃13;

<!--slide-part-starts--><div class="slide-part">
    <!--slider-starts--><div class="fadein">
<img style="cursor:pointer" onclick="window.location.href='http://myevio.com/powerock-13600mAh-powerbank.html'" src="http://www.callbox.com.co/programacionWeb/bitramParking/slide_img/images/example/parking_ruta.jpg"><!--powerock-->
<img style="cursor:pointer" onclick="window.location.href='http://myevio.com/powerpunch-10500mAh-powerbank.html'" src="http://4.bp.blogspot.com/-z-1cdSTPYww/Th8pXvziI7I/AAAAAAAAG5k/j9EglrHT_Ik/s1600/20.jpg"><!--powerpunch-->
</div><!--slide-ends-->
</div><!--slide-part-ends-->

<!--about-evio-starts--><div class="about-evio">
At EViO, we make tech gear that helps improve productivity,<br />
so that you have more time to do the essential things - living life to the fullest.
</div><!--about-evio-ends-->

＆＃13;

{{1}}

＆＃13;

Answer 2

查看此DEMO。

您需要检查宽高比，并使用特定百分比值调整填充顶部，以便图像显示良好。

HTML：

<!--slide-part-starts--><div class="slide-part">
<!--slider-starts--><div class="fadein">
<img style="cursor:pointer" onclick="window.location.href='http://myevio.com/powerock-13600mAh-powerbank.html'" src="http://placehold.it/1150x350"><!--powerock-->
<img style="cursor:pointer" onclick="window.location.href='http://myevio.com/powerpunch-10500mAh-powerbank.html'" src="http://placehold.it/1150x350"><!--powerpunch-->
</div><!--slide-ends-->
</div><!--slide-part-ends-->

<!--about-evio-starts--><div class="about-evio">
At EViO, we make tech gear that helps improve productivity,<br />
so that you have more time to do the essential things - living life to the fullest.
</div><!--about-evio-ends-->

CSS：

.slide-part{
    width:100%;
    max-width:1600px;
    margin:0 auto;
    min-height:100px;
    height:100%
}

.fadein {
    padding-top: 27%;
    position:relative; 
    width:100%; 
    max-width:1600px; 
    margin:0 auto; 
    min-height:100px;
    height:100%
}

.fadein img {
    position:absolute; 
    left:0; 
    top:0; 
    bottom:0;
    right:0;
    height:100%;
    width:100%; 
}

.about-evio{
    width:100%;
    text-align:center;
    padding:50px 0 50px 0;
    border-top:1px solid #000;
    border-bottom:1px solid #000;
    text-align:center;
    min-height:20px;
    background:#fff;
    font-size:1.2em;
    line-height:30px
}

自动扩展div高度不起作用

2 个答案: