div中间图像的中间部分

时间:2018-02-07 17:57:28

标签: html css owl-carousel

图像比周围的div宽。 这适用于美孚单位。 div中的图像 有宽度:自动;拿着它的div也很宽 作为可见区域。所以如果div是500px那么 图片可能会有1000px左右的变化。但我想要 仅显示图像的中间部分。

我正在使用旧版本的OWL Carousel v1.3.3

new
Out[100]: 
          0         1         2         3         4         5
0 -0.036327 -0.594224 -0.328402 -0.001436 -1.339613 -0.721508
1  1.891510  0.164184  0.408685  1.986148  0.176883  0.146694
2 -0.383299  1.416787 -0.638341  0.018629 -0.319985 -1.832628
3  0.097420 -0.868072  0.125003  1.134909  0.500017  0.319324

谢谢!

使用以下内容修复:

   <div id="custom-owl-slider" class="owl-slide" data-scroll-speed="2">
                <div class="item">
                    <img src="images/slider/IMG_3455.png" alt="">
                </div>
                 <div class="item">
                    <img src="images/slider/IMG_771.JPG" alt="">
                </div>
                <div class="item">
                    <img src="images/slider/IMG_321.JPG" alt="">
                </div>
                <div class="item">
                    <img src="images/slider/IMG_344.jpeg" alt="">
                </div>  
                <div class="item">
                    <img src="images/slider/IMG_563.jpeg" alt="">
                </div>   
                <div class="item">
                    <img src="images/slider/IMG_135.jpeg" alt="">
                </div>
            </div>

1 个答案:

答案 0 :(得分:0)

试试img middle

.item > img {
    text-align: center;
    overflow: hidden;
}

PD:如果你愿意,这段代码应该适合div上的图像

.item > img{
    width: 100%;
}