使響應式圖像適合父容器

我一直在試圖弄清楚是否有一個純粹的CSS解決方案，以確保我的橫幅內的圖像不會低於父級的高度，但保持圖像的比例。使響應式圖像適合父容器

這裏你可以看到一個演示：http://jsfiddle.net/LkxYU/1/

HTML：

<div class="banner_holder"> 
    <img src="http://placekitten.com/g/800/600"/>  
</div>

CSS：

.banner_holder{ 
    width: 100%; 
    height: 300px; 
    min-height: 200px; 
    position: relative; 
    outline:1px dotted red; 
} 

.banner_holder img{ 
    width: 100%; 
}

我的目標是讓圖像始終爲100％，但不會低於300像素的高度。這意味着圖像截止，但多數民衆贊成罰款，我只是想知道，如果有一個純CSS的解決方案，或者如果我需要使用jQuery

來源

2013-11-04 Doidgey

而不是使用< img>標籤的，我做了形象的div的背景圖像，並把它以下樣式：

.banner_holderImage{ 
    height: 100%; 
    position:relative; 
    background: url("http://placekitten.com/g/800/600")no-repeat; 
    background-size: cover; 
    background-position: center; 
}

這裏的擺弄我所用：http://jsfiddle.net/MathiasaurusRex/LkxYU/4/

下面是完整的HTML和CSS：

<div class="banner_holder"> 
    <div class="banner_holderImage"></div> 
</div>

.banner_holder{ 
    width: 100%; 
    height: 300px; 
    min-height: 200px; 
    position: relative; 
    outline:1px dotted red; 
} 

.banner_holderImage{ 
    height: 100%; 
    position:relative; 
    background: url("http://placekitten.com/g/800/600")no-repeat; 
    background-size: cover; 
    background-position: center; 
}

來源

2013-11-04 23:40:59

我不知道爲什麼我沒有想到背景圖片！感謝您的出色答案 – Doidgey

背景圖片不適用於Google機器人和蜘蛛，因此圖片無法用於搜索。不應使用在產品或項目的情況下顯示和搜索 – Raffaeu

@Raffaeu您可以使用圖像標記定義添加背景圖像到您的站點地圖。詳情請參閱https://support.google.com/webmasters/answer/178636 雖然這只是一個小小的解決方法，但假設Google無法抓取背景圖片是錯誤的假設。 –

嘗試：

.banner_holder img{ 
height: 100%; 
/* OR */ 
height: inherit; 
}

來源

2013-11-04 23:35:26 Adriana

使用最大高度和MAX-寬度，以確保圖像將總是適合父DIV：

.banner_holder{ 
    width: 200px; 
    height: 300px; 
    position: relative; 
    outline:1px dotted red; 
} 

.banner_holder img{ 
    max-width: 100%; 
    max-height: 100%; 
}

編輯：對不起，我錯過了一部分，你寫了300像素截止的東西:) MathiasaurusRex的答案是正確的。

來源

2013-11-04 23:39:59 Arius

您的圖片難免會出這取決於屏幕尺寸比例的，爲什麼不嘗試一下背景圖片：

.banner_holder{ 
    width: 100%; 
    height: 300px; 
    min-height: 200px; 
    position: relative; 
    outline:1px dotted red; 
    background: url('http://placekitten.com/g/800/600') center no-repeat; 
    background-size: cover; 
}

，或者你可以只添加一個最大高度，以你的形象標籤：

.banner_holder img{ 
    width: 100%; 
    max-height: 300px; 
}

來源

2013-11-04 23:41:02 jabs83

使響應式圖像適合父容器

回答

相關問題