Question

我尝试遵循this answer，除非错过了任何东西，否则任何方法都无效。这是link of the website

我希望通过缩小图像或理想地更改滑块的高度来将图像垂直放置在光滑的滑块中。我不需要自适应高度，应该在所有滑块上固定该高度。

<section id="homepage-banner" class="clearfix banner_desktop">
    <a href="#" class="slider-nav slide-left" style="display: inline;"></a>
    <a href="#" class="slider-nav slide-right" style="display: inline;"></a>
    <div class="caroufredsel_wrapper" style="text-align: start; float: none; position: relative; top: auto; right: auto; bottom: auto; left: auto; z-index: auto; width: 2529px; height: 550px; margin: 0px; overflow: hidden; cursor: move;"><div class="banner clearfix banner_desktop" id="slider-1" style="text-align: left; float: none; position: absolute; top: 0px; right: auto; bottom: auto; left: 0px; margin: 0px; width: 17703px; height: 550px; z-index: auto; opacity: 1;">



                <div class="slide" style="width: 2529px;">
                <a href="https://www.themigrantproject.org/migration-info/" style="background-image: url(http://dev.themigrantproject.org/wp-content/uploads/2019/06/AMHARIC-2banner-desktop.jpg)">
                    <img src="http://dev.themigrantproject.org/wp-content/uploads/2019/06/AMHARIC-2banner-desktop.jpg" class="visible-xs">
                </a>
            </div><div class="slide" style="width: 2529px;">
                <a href="https://www.themigrantproject.org/migration-info/" style="background-image: url(http://dev.themigrantproject.org/wp-content/uploads/2019/06/AMHARIC-3banner-desktop.jpg)">
                    <img src="http://dev.themigrantproject.org/wp-content/uploads/2019/06/AMHARIC-3banner-desktop.jpg" class="visible-xs">
                </a>
            </div><div class="slide" style="width: 2529px;">
                <a href="https://www.themigrantproject.org/migration-info/" style="background-image: url(http://dev.themigrantproject.org/wp-content/uploads/2019/06/AMHARIC-1banner-desktop.jpg)">
                    <img src="http://dev.themigrantproject.org/wp-content/uploads/2019/06/AMHARIC-1banner-desktop.jpg" class="visible-xs">
                </a>
            </div></div></div>
    <div id="pagination" class="" style="display: block;"><a href="#" class=""><span>1</span></a><a href="#" class="selected"><span>2</span></a><a href="#" class=""><span>3</span></a></div>
</section>

我尝试过

.slide, .slide a, .caroufredsel_wrapper, #homepage-banner {
    height: 667px !important;
}

虽然确实增加了高度，但是图像仍然无法完美显示，您可以在上一张幻灯片中清楚地看到。

图像高度为667像素，横幅的高度增加了，但滑块仍在裁剪其中的一部分。如果我将高度增加到1000像素，则不会有任何区别。顺便说一句，您在上面的html代码段中看到的宽度是我写的，光滑的滑块会自动完成。

修改

我认为光滑的图像会自动裁剪图像。

增加滑动滑块的高度

0 个答案: