Question

这是我的网站www.foxboxretail.com。在前横幅滑块中，css代码存在问题。问题是当屏幕尺寸发生变化时，横幅导航展示位置会发生变化。

1360px resolutionv（非常完美）

1920px分辨率（滑块的导航位置已更改。）

在上面的图像中，您可以看到导航略微上方，使设计混乱。如何维护所有屏幕尺寸？

CSS

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

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

.fadein img {
    position:absolute; 
    left:0; 
    top:0; 
    bottom:0;
    right:0;
    width:100%; 
    width: auto\9;
    object-fit:fill;
    height:400px
}

.banner-links {
    position: absolute;
    bottom: 0;
    width: 100%;
    background: rgba(0,0,0,0.6);
}

.banner-links-inner {
    width:auto;
    max-width:1000px;
    margin: 0 auto 0 auto;
}

.banner-nav {
    margin: 0;
    padding: 0;
}

.banner-nav li {
    list-style: none;
    float: left;
    font-size: 1.2em;
}

.banner-nav li a {
    color: #fff;
    text-decoration: none;
    padding: 15px 50px 15px 50px;
    display: block;
    border-right: 1px solid #fff;
}

HTML

<div class="slide-part">
        <!--slider-starts-->
        <div class="fadein">

            <img id="img01" style="cursor: pointer; display: block;" src="images/products/1.jpg" />
            <img id="img02" style="cursor: pointer; display: none;" src="images/products/2.jpg" />
            <img id="img03" style="cursor: pointer; display: none;" src="images/products/3.jpg" />
            <img id="img04" style="cursor: pointer; display: none;" src="images/products/4.jpg" />
        </div>
        <!--slide-ends-->
        <div class="banner-links">
            <div class="banner-links-inner">
                <ul class="banner-nav">
                    <li><a class="img1 current" data-id="img01" href="#">Helicopter Tour Mumbai</a></li>
                    <li><a class="img2" data-id="img02" href="#">JBL Flip II Offer</a></li>
                    <li><a class="img3" data-id="img03" href="#">Dominos 20% Off</a></li>
                    <li class="no-border"><a class="img4" data-id="img04" href="#">Paragliding</a></li>
                </ul>
            </div>
        </div>
    </div>

Answer 1

为滑块图像添加最大高度应该可以达到你想要的效果。

.fadein img {
 max-height:468px;
 }

保持元素放置作为屏幕分辨率更改

1 个答案: