在高度和宽度内的响应式图像<figure>

Question

我在<figure>内有图像。我想在窗口大小调整时，图像具有响应行为，我希望始终能够观察图像的高度和宽度100%。我希望整个图像总能被看到。

http://jsfiddle.net/ckdm0joj/

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>

Answer 1

是的，你可以做到这一点。

替换以下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>

Answer 2

如果你不介意的话，看看你的形象是拉伸，弯曲可以是这样： 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>