如何防止圖像擴展到容器之外？

我有一個高度大於它的容器的圖像。該圖像被設置爲最大高度：100％，最大寬度：100％，但它繼續增長超出其包含的元素（高度 - 令人驚訝的是不在寬度）如何防止圖像擴展到容器之外？

如何防止它擴展超出它的容器同時保持高寬比？

一個例子是可在http://codepen.io/navarr/pen/zxZjjP，並且在該例子中的代碼：

的HTML：

<div class="row"> 
    <div class="col"> 
    <div class="link"> 
     <img src="http://i.imgur.com/qG6NmU7.png" /> 
    </div> 
    <h3>100 x 800 image</h3> 
    </div> 
    <div class="col"> 
    <div class="link"> 
     <img src="http://i.imgur.com/EjltysP.png" /> 
    </div> 
    <h3>800 x 100 image</h3> 
    </div> 
    <div class="col"> 
    <div class="link"> 
     <img src="http://i.imgur.com/zJlunbp.jpg" /> 
    </div> 
    <h3>800 x 100 image</h3> 
    </div> 
    <div class="col"></div> 
</div>

的SCSS：

.row { 
    display: flex; 
    .col { 
    display: block; 
    border: 1px solid blue; 
    width: 50px; 
    height: 400px; 
    flex-grow: 1; 
    display: flex; 
    flex-direction: column; 
    text-align: center; 

    .link { 
     flex: 1 1 auto; 
     img { 
     max-height: 100%; 
     max-width: 100%; 
     } 
    } 
    h3 { 
     flex: 0 0 auto; 
     background: green; 
    } 
    } 
}

第一個框示出了該問題：將圖像擴展超出它的包含元素。

第二個和第三個盒子顯示這隻要圖像寬度比它高，就不會出現問題。

來源

2015-01-15 Navarr

你願意改變'img'到容器div的背景圖片嗎？ – Lee 2015-01-15 15:53:01

@我沒有想到這一點 - 我不確定它會成爲真實情況中的一種選擇，但會看看它。 – Navarr 2015-01-15 16:02:43

@Lee如果您想用背景圖片作爲解決方法發佈答案（關於此時此刻不可能實現的答案），我很樂意將其標記爲答案（直到較新的答案變得適用或以其他方式） – Navarr 2015-01-23 19:57:49

有一個div更換img標籤和設置圖像作爲背景圖像，這增加了造型：

Background-size:contain;

這將允許圖像保持其縱橫比，但填充div的整個空間越多越好。

您也可以嘗試background-size:cover;，看看哪一個更適合您的需求。

請記住，您需要在使用背景圖像時包含div的高度和寬度。

來源

2015-01-23 20:20:10 Lee

添加height: 100%;到圖像的父：

.link { 
    flex: 1 1 auto; 
    height: 100%; 

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

demo

來源

2015-01-15 15:50:59 Brewal

有趣的是，這在IE和Chrome中以相同的方式工作，但對Firefox有不利影響。 – Navarr 2015-01-15 15:57:33

你想讓圖片在H3下進行還是隻需填寫'.link'？這確實有點奇怪......我認爲我們現在正在實施靈活性限制。在'.link'中添加'min-height：0;'似乎可以在firefox下工作。 – Brewal 2015-01-15 16:31:42

min-height：0在鏈接下使其正常工作（在FireFox中）。我絕對希望它只是填滿.link - 你認爲這是一個執行flexbox的錯誤？ – Navarr 2015-01-15 16:39:25

集的寬度和高度在CSS中。鏈接。

檢查編輯codepen http://codepen.io/anon/pen/azJGrK

CSS

.link { 
     flex: 1 1 auto; 
     width: 100%; 
     height: 80%; 
    img { 
     max-height: 100%; 
     max-width: 100%; 
     }

來源

2015-01-15 15:53:43 Amon

如何防止圖像擴展到容器之外？

回答

相關問題