Question

现在正在寻找几个小时。我想在页面上使用flexslider作为一种横幅旋转器。我设法为图像获得固定的高度。但是图像的宽度会左右拉伸到浏览器边框。我相信我想要的是“溢出：隐藏”的一些东西。如果browser_width＆gt; img_width：从图像左右显示背景。如果browser_width＆lt; 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;
}

具有固定高度的柔性滑板，同时保持图像纵横比与溢出隐藏

1 个答案: