身高問題：圖像的100％

Question

任何人都知道如何解決此問題：

示例的圖像超出了包含它的圖像包裝器。 如果它較小或將“ max-height：40vw”更改為“ height：40vw”，則它可以正常工作，但是這兩種解決方案都對我不利。

我正在嘗試使圖像以不同的分辨率響應（台式機到筆記本電腦，對於移動設備，我具有不同的設計），例如： http : //goo.gl/yRo5OE （deviantart）

我嘗試實施的網站： http : //goo.gl/AAF4U7

謝謝，如果您還有其他解決方案，請告訴我。

 .image-wrapper { display:flex; justify-content:center; max-height:40vw; background:#141414; } .image-wrapper img { height:100%; width:auto; } 

 <div class="image-wrapper"> <img src="http://webbiter.com/project/tattoobiter.com/wp-content/uploads/2015/06/skull-with-rose.jpg"> </div> 

Answer 1

只需從CSS移除height:100%

 .image-wrapper { display:flex; justify-content:center; max-height:40vw; background:#141414; } .image-wrapper img { width:auto; } 

 <div class="image-wrapper"> <img src="http://webbiter.com/project/tattoobiter.com/wp-content/uploads/2015/06/skull-with-rose.jpg"> </div> 

Answer 2

請查看以下內容是否有幫助-

1. img{max-width:100%; width:auto; vertical-align: top;}

   要么

2. http://jsbin.com/guwicolora/edit?output