在高度和寬度內的響應式圖像<figure>

我在<figure>內有圖像。我想在窗口大小調整時，圖像具有響應行爲，我希望始終能夠觀察圖像的高度和寬度100%。我希望整個圖像總能被看到。在高度和寬度內的響應式圖像<figure>

figure.figure_container { 
 
    position: relative; 
 
    width: 100%; 
 
    max-height: 250px; 
 
    border-radius: 6px; 
 
    -moz-border-radius: 6px; 
 
    -webkit-border-radius: 9px; 
 
    overflow: hidden; 
 
    margin-top: 10px; 
 
    margin: 0 auto; 
 
} 
 

 
.figure_container img { 
 
    width: 100%; 
 
}

<figure class='figure_container'> 
 
    <img src='https://lumiere-a.akamaihd.net/v1/images/dory_characters_0afa6e45.jpeg?region=0%2C0%2C1200%2C778' /> 
 
</figure>

來源

2017-04-18 yavg

這是你想要做的嗎？ http://jsfiddle.net/ckdm0joj/1/最大高度：250px上圖不會讓圖像100％寬度沒有伸展它或溢出它 –

@GCyrillus謝謝，但是，我希望圖像的寬度爲100％，以及在容器中，並且高度是容器的100％。 – yavg

您是否還想保持圖像寬高比？ – Stickers

是的，你可以做到這一點。

替換以下CSS此：

.figure_container img{ 
    max-width: 100%; 
    max-height: inherit; 
    width: auto; 
}

通過添加inherit到max-height財產，你excerly告訴CSS不作比它的父元素的圖像heigher。所以，如果你改變了.figure-container高度350px圖像的max-height也將350px

繼承關鍵字指定屬性應該繼承其父元素的值。

編輯看完您的意見：

如果你希望你充滿其容器width與width: 100%取代width: auto。然而，這將舒展你的形象，因爲.figure-container有max-width的250px

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

figure.figure_container{ 
 
    position: relative; 
 
    width: 100%; 
 
    max-height: 250px; 
 
    border-radius: 6px; 
 
    -moz-border-radius: 6px; 
 
    -webkit-border-radius: 9px; 
 
    overflow: hidden; 
 
    margin-top: 10px; 
 
    margin: 0 auto; 
 
} 
 

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

<figure class='figure_container'> 
 
    <img src='https://lumiere-a.akamaihd.net/v1/images/dory_characters_0afa6e45.jpeg?region=0%2C0%2C1200%2C778' /> 
 
</figure>

來源

2017-04-18 15:20:43 Red

太棒了，但我需要的圖像適合100％的數字的寬度，在這種情況下，這是100％ – yavg

如果你不介意的話，看看你的形象是拉伸，彎曲可以是這樣： http://jsfiddle.net/ckdm0joj/2/

figure { 
 
    display:flex; 
 
    max-height:250px; 
 
    border-radius:6px; 
 
    overflow:hidden; 
 
    width:100%; 
 
    margin:0; 
 
    padding:0 
 
} 
 
img { 
 
    flex:1; 
 
} 
 
body { 
 
margin:0; 
 
}

<figure class='figure_container'> 
 
    <img src='https://lumiere-a.akamaihd.net/v1/images/dory_characters_0afa6e45.jpeg?region=0%2C0%2C1200%2C778' /> 
 
</figure>

來源

2017-04-18 15:29:35

謝謝，我重視你的努力，但在這種情況下圖像是不完全看到（寬度） – yavg

??它怎麼沒有完全看到？這是這裏唯一的內容.... exept的半徑角落。你甚至可以設置一個保證金http://jsfiddle.net/ckdm0joj/3/你認爲在這裏失蹤了什麼？ –

在高度和寬度內的響應式圖像<figure>

回答

相關問題