<img>擴展到整個div與保持比例

-1

我有一個畫廊滑塊在bootstrap。它必須是RWD，所以我必須使用例如。最大高度。<img>擴展到整個div與保持比例

問題是這個圖庫中的圖像可能不同。它們可以更大/更小 - 具有不同的比例。

在這個例子中，a .carousel div具有height: 450px。爲了RWD友好我想使用max-height，但此輪播中的圖像必須100％與整個div保持比例。即使一些圖像會溢出這個div（或相反）。在這種情況下，img必須垂直和水平居中（可能用flexbox？）。當我做max-height旋轉木馬會跳，因爲照片可以更大或更小。當我設置height爲輪轉，她不跳，但它不是RWD選項和一些圖片可以比格小（查看下面的示例）

Here is example

來源

2016-07-10 Sokołow

響應的設計通常集中在介質寬度而這又決定了高度。恩。 'img {max-width：100％;身高：自動; }' – zer00ne

您正在使用較高的高度，而不是較短的圖像，你想要的是最大高度：380px; –

嘗試使用object-fit: cover。無論您設置的尺寸是多少，這些都會保持圖像配給。它有點像裁剪圖像。您也可以添加object-position: center以將圖像放置在中心位置。

.carousel-inner > .item > img { 
    object-fit: cover; 
    object-position: center; 
    // then your height and/or width 
}

參考這些鏈接以獲取更多信息：https://developer.mozilla.org/en-US/docs/Web/CSS/object-fit

來源

2016-07-10 09:43:35

你最好的賭注是真的添加您的圖像作爲背景圖片在你的CSS，你可以做到這一點，在實際的CSS樣式表，或者只是添加樣式標記到.item本身。然後將您的身高等添加到.carousel .item而不是整個傳送帶本身以及背景位置和背景大小，然後將您的標記中的圖像標記完全從.item中刪除。在以下示例中，我將！Imporatant添加到背景大小和背景位置。您可以刪除這些，如果你要只是說明在CSS樣式表中的背景，但如果你願意，你可以做somthething喜歡把它們放在HTML標記的風格標籤像

<div class="item active" style="background:url('path-to-image');"></div>

如果你這樣做你會需要保留在你的CSS重要的聲明，以便這個工作，否則沒有必要爲他們。

這裏是一個修改後的小提琴Fiddle Demo

所以你的CSS看起來像下面這樣：

.carousel .item{ 
    width: 100%; 
    height: 450px; 
    overflow: hidden; 
    background-position:center !Important; 
    background-size:cover !important; 
} 
.carousel .item:nth-of-type(1){ 
    background:url('https://pixabay.com/static/uploads/photo/2014/03/29/09/17/cat-300572_960_720.jpg') 
} 
.carousel .item:nth-of-type(2){ 
    background:url('https://wallpapers.wallhaven.cc/wallpapers/full/wallhaven-349976.png') 
} 
.carousel .item:nth-of-type(3){ 
    background:url('https://wallpapers.wallhaven.cc/wallpapers/full/wallhaven-80082.jpg') 
} 

/* Indicators list style */ 
.article-slide .carousel-indicators { 
    width: auto; 
    white-space: nowrap; 
    margin: 0; 
    left: 50%; 
    transform: translate(-50%, -50%); 
} 
/* Indicators list style */ 
.article-slide .carousel-indicators li { 
    border: medium none; 
    border-radius: 0; 
    float: left; 
    height: 54px; 
    margin-bottom: 5px; 
    margin-left: 0; 
    margin-right: 5px !important; 
    margin-top: 0; 
    width: 100px; 
} 
/* Indicators images style */ 
.article-slide .carousel-indicators img { 
    border: 2px solid #FFFFFF; 
    float: left; 
    height: 54px; 
    left: 0; 
    width: 100px; 
} 
/* Indicators active image style */ 
.article-slide .carousel-indicators .active img { 
    border: 2px solid #428BCA; 
    opacity: 0.7; 
}

來源

2016-07-10 10:16:30

<img>擴展到整個div與保持比例

回答

相關問題