具有固定高度的柔性滑板，同時保持圖像縱橫比與溢出隱藏

Question

現在正在尋找幾個小時。 我想在頁面上使用flexslider作為一種橫幅旋轉器。 我設法為圖像獲得固定的高度。 但是圖像的寬度會左右拉伸到瀏覽器邊框。 我相信我想要的是“溢出：隱藏”的一些東西。 如果browser_width> img_width：從圖像左右顯示背景。 如果browser_width <img_width：從左側和右側的圖像中剪切部分。 所有方式都保持縱橫比。

目前，圖像水平拉伸/收縮。

HTML

<div class="flexslider">
    <ul class="slides">
        <li>
            <div class="flexslider_image">
                <img src="/images/alnwick-castle-92607.png" />
            </div>
        </li>
        <li>
            <div class="flexslider_image">
                <img src="/images/server-90389.png" />
            </div>
        </li>

    </ul>
</div>

CSS

.slider_container {
  margin-top: -120px;
}

.flexslider {
  border: none !important;
  box-shadow: none;
  margin:0px; 
  padding: 0px; 
}

.slides li {
  background-position: center;
  -webkit-backface-visibility: hidden;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}

.flexslider_image {

}

.flexslider_image img {
  height: 500px;
}

Answer 1

搜索了幾個小時后，我找到了解決方案。

不要對圖像使用img-tag。 而是使用帶背景圖像的div。 有關詳細信息，請參閱我的html和CSS。

無論如何，我鎖定的另一個優點是，現在可以更輕松地將內容放在幻燈片上。

HTML

<div class="flexslider">
    <ul class="slides">
        <li>
            <div class="flexslider_background" style="background: url('/images/server-90389.png') no-repeat center;">
                <div class="flexslider_content">
                    <p>
                        Hallo Test 2
                    </p>
                </div>
            </div>
        </li>
        <li>
            <div class="flexslider_background" style="background: url('/images/minecraft-938604.png') no-repeat center;">
                <div class="flexslider_content">
                    <p>
                        Hallo Test 3
                    </p>
                </div>
            </div>
        </li>
        <li>
            <div class="flexslider_background" style="background: url('/images/minecraft-669310.jpg') no-repeat center;">
                <div class="flexslider_content">
                    <p>
                        Hallo Test 4
                    </p>
                </div>
            </div>
        </li>
    </ul>
</div>

CSS

.slider_container {
  margin-top: -120px;
}

.flexslider {
  border: none !important;
  box-shadow: none !important;
  margin:0px !important;
  padding: 0px !important;
  margin-bottom: 10px !important;
  background-color: #eee !important;
}

.slides li {
  background-position: center;
  -webkit-backface-visibility: hidden;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}

.flexslider_background {
  height: 500px;
  text-align: center;
}

.flexslider_content {
  display: inline-block;
  margin-top: 145px;
  height: 350px;
  width: 1000px;
  border: 3px solid black;
}

.flexslider_content p {
  float: left;
  font-size: 2em;
}