圖像沒有采取容器的全高

Question

我正在創建我的網站的關於部分，並正在放置一個圖像，除了一些文字，現在當我縮小屏幕尺寸的圖像出於某種原因不佔據整個高度包含<div> ..請檢查fiddle，並幫助我瞭解此原因。

邊框會告訴你在哪，我不希望顯示底部的縫隙..

請注意，我做了引導有線以及用於該項目，但我不使用它的這個部分。

感謝大家在期待

Answer 1

你得最小寬度和最大寬度上的圖像的父設置，如下所示：

.about-content { 
    box-sizing: border-box; 
    min-width: 200px; 
    max-width: calc(50% - 2em); 
} 

刪除最小/最大寬度屬性和它作品（請注意，我已經在CSS中添加了媒體查詢，如下所示）：https://jsfiddle.net/m9j61oua/7/

雖然我不知道任何設備如此小巧，但可以將其包裝在媒體查詢中：

@media (min-width: 201px) { 
    .about-content { 
     min-width: 200px; 
     max-width: calc(50% - 2em); 
    } 
} 

編輯 - 繼下面的評論，我覺得唯一的辦法你是在第二個div使用背景圖片，這裏有一個小提琴：https://jsfiddle.net/m9j61oua/14/

相關CSS：

.about-content.bg-image { 
    background-image: url(http://assets.worldwildlife.org/photos/1620/images/carousel_small/bengal-tiger-why-matter_7341043.jpg?1345548942); 
    background-size: cover; 
    min-height: 200px; 
} 

我已將類bg-image添加到您的第二個div，並刪除了其中的圖像元素。你可以看到，它不是一個完美的解決方案，你正在尋找的東西，但正確的形象和一些媒體查詢，你應該能夠破解它。

Answer 2

您已經定義了這樣的風格

.about-content img { 
    max-width: 100%; 
    height: auto; 
} 

保持圖像長寬比力的瀏覽器。

使用具有正確寬高比的圖像或更改img元素的樣式。

Answer 3

圖像沒有更高。如果你給它height: auto，它保持它的比例，這通常是期望的。

如果您將其設置爲高度：100％，則會發生扭曲，或者（如果您將寬度設置爲「自動」），則切斷兩側。

一種可能性是將圖像定義爲其容器的背景圖像並使用其上的background-size: cover; background-position: center; Background-repeat: no-repeat;。但是這會切斷圖像的某些部分。

如果您改爲使用background-size: contain;，則會再次獲得完整圖像，但在側面或頂部和底部留出一些空間。

Answer 4

css中＃14行有一點變化。更改max-width: 100%;至max-width: auto;height:auto至height:100% & 而這裏是您的代碼在您的CSS中進行更改，它將起作用。：

.about-content-wrapper { 
    margin: 2em 0 5em; 
    display: flex; 
    flex-wrap: wrap; 
    padding: 0 1em; 
    border:1px solid #ccc; 
} 
.about-content { 
    box-sizing: border-box; 
    min-width: 200px; 
    max-width: calc(50% - 2em); 
} 
.about-content img { 
    max-width: none; 
    height: 100%; 
} 
.about-content h2, 
.about-content p { 
    margin: 0 1em 0 1em; 
}