如何在自舉輪播中縮小圖像

我正在嘗試構建一個旋轉木馬，它充當我的網站的一種背景圖像封面，類似於wordpress中的革命性滑塊，但不是插件。 Iam只爲我的靜態網站構建它。問題是，我的一些圖片是不同的高度和寬度，所以傳送帶無法正確調整。例如img no。 1是2048 * 3072像素第二是3072 * 2048像素等。我想使我的傳送帶高度和寬度100％像封面圖像。當我設置最小寬度和高度分別爲100％和100vh時，圖像會從底部切出。任何幫助？這裏是我的代碼如何在自舉輪播中縮小圖像

<!--carousel--> 
<div id="myCarousel" class="carousel slide" data-ride="carousel"> 
<!-- Indicators --> 
    <ol class="carousel-indicators"> 
    <li data-target="#myCarousel" data-slide-to="0" class="active"></li> 
    <li data-target="#myCarousel" data-slide-to="1"></li> 
    <li data-target="#myCarousel" data-slide-to="2"></li> 
    <li data-target="#myCarousel" data-slide-to="3"></li> 
    </ol> 

    <!-- Wrapper for slides --> 
    <div class="carousel-inner" role="listbox"> 
    <div class="item active"> 
    <img class ="fill"src="img/msp_0409_3522.jpg" alt="Chania"> 
    </div> 

    <div class="item"> 
     <img class ="fill" src="img/msp_0406_1786.jpg" alt="Chania"> 
    </div> 

    <div class="item"> 
     <img class ="fill" src="img/msp_1608_9566.jpg" alt="Flower"> 
    </div> 

    <div class="item"> 
    <img class ="fill" src="img/msp_1605_6918.jpg" alt="Flower"> 
    </div> 
    </div> 

    <!-- Left and right controls --> 
    <a class="left carousel-control" href="#myCarousel" role="button" data-         slide="prev"> 
    <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span> 
    <span class="sr-only">Previous</span> 
    </a> 
    <a class="right carousel-control" href="#myCarousel" role="button" data- slide="next"> 
    <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"> </span> 
    <span class="sr-only">Next</span> 
    </a> 
    </div>

CSS

html,body{ 
    height:100%; 
    } 
    .carousel,.item,.active{ 
height:100%; 
    } 
.carousel-inner{ 
height:100%; 
} 
.fill{ 
    width:100%; 
    height:100%; 
    background-position:center 
    ;background-size:cover; 
    }

來源

2017-02-23 puneet saraswat

'身體height'應該是像素，然後你可以使用'height：100％'。因爲它需要「高度：100％」的參考高度才能正常工作。 –

@Tumen_t不是。 'height：100％;'不需要像素值繼承，儘管它需要在它的父元素（可以是任何單位）上設置高度，因此它可以計算出某個特定元素的100％等於高度。 OP的'height：100％;'在'html' _and_' body'上設置。這導致'body'從'html'繼承，'html'從視口繼承。請參考[本工作示例]（https://jsfiddle.net/ymern7h3/）。 – hungerstar

你應該使用對象的合適物業。你可以嘗試這樣的事情：

.carousel-inner img { 
    object-fit: contain; 
}

https://css-tricks.com/almanac/properties/o/object-fit/

來源

2017-02-23 15:53:37 Kornflexx

在你的代碼，它看起來像.carousel-inner>.item>img是壓倒個夠類。爲了覆蓋bootstrap屬性，爲你的類添加一個！重要的。

.fill { 
    width: 100%; 
    height: 100% !important; 
}

你也不需要background-position或background-size，因爲它們只風格的背景圖像

Code Pen link

來源

2017-02-23 16:09:03 Elliot

我試過這個，圖像沒有從底部裁剪，但寬度不保持100％。高度工作正常。任何想法爲什麼 –

的背景圖片，你可以使用：

background-image: url("image.jpg"); 
background-attachment: fixed; 
background-position: center; 
background-repeat: no-repeat; 
background-size: cover;

來源

2017-02-23 17:18:13

如何在自舉輪播中縮小圖像

回答

相關問題