CSS Flexbox：如何在保留長寬比的同時調整固定大小的圖像

我有一個固定大小的圖像，比方說800px（w）800px（h）。當我縮小瀏覽器時，我希望我的圖像保持縱橫比。我如何用flexbox實現這一目標？這甚至有可能嗎？瀏覽器兼容性不是問題。CSS Flexbox：如何在保留長寬比的同時調整固定大小的圖像

這是我的codepen。 http://codepen.io/vennsoh/pen/xEKzD

或者我必須求助於@media查詢或元素？

<div class="parent"> 
    <img src="http://placehold.it/800x800" alt="" class="child" /> 
</div> 

.parent{ 
    display: flex; 
}

來源

2014-10-01 Vennsoh

檢查此鏈接[http://jsfiddle.net/yugi47/g6g87ay7/] – yugi 2014-10-01 03:33:58

這麼簡單！你是天才！但是，需要一個最大寬度，如下所述。 – Vennsoh 2014-10-01 03:47:26

我以某種方式認爲@yugi的回答很好。另一個被接受的答案具有現在已被棄用的屬性。 – Rohit 2014-10-01 04:16:26

添加到你的CSS

.parent{ 
    display: flex; 
    -webkit-box-orient: horizontal; 
    -moz-box-orient: horizontal; 
    box-orient: horizontal; 
    flex-direction: row; 

    -webkit-box-pack: center; 
    -moz-box-pack: center; 
    box-pack: center; 
    justify-content: center; 

    -webkit-box-align: center; 
    -moz-box-align: center; 
    box-align: center; 
    align-items: center; 
} 

img {max-width:100%;}

來源

2014-10-01 03:49:35 HTML5

試試這個

.child{ 
    max-width:800px; 
    width:100% 
    height:auto; 
    }

來源

2014-10-01 04:43:08 Justin

CSS Flexbox：如何在保留長寬比的同時調整固定大小的圖像

回答

相關問題