Question

我有一个固定大小的图像，让我们说800px（w）800px（h）。当我缩小浏览器时，我希望我的图像保持纵横比。如何使用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;
}

Answer 1

添加到您的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%;}

Answer 2

试试这个

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

CSS Flexbox：如何在保持纵横比的同时调整固定大小的图像

2 个答案: