如何将图像弯曲为宽度？

Question

如何防止我的图像被拉伸到自然的200px宽度？

footer { 
 
    display: flex; 
 
} 
 
img { 
 
    flex: 1; 
 
    margin: 1em; 
 
}

<footer> 
 
    <img src=http://www.placebacon.net/200/150> 
 
</footer>

Answer 1

采取柔性关闭图像和设置最大宽度为100％。这将允许图像增长到最大尺寸，并缩小，如果它的父缩小。然后添加align-items：flex-start到容器。这将使高宽比保持不变，如果它缩小。

footer { 
 
    display: flex; 
 
    align-items: flex-start; 
 
} 
 
img { 
 
    margin: 1em; 
 
    max-width: 100%; 
 
}

<footer> 
 
    <img src=http://www.placebacon.net/200/150> 
 
</footer>

Answer 2

你可以折腾成一个简单的容器，并利用它来进行弯曲：

<footer> 
    <div> 
    <img src=http://www.placebacon.net/200/150> 
    </div> 
</footer> 

footer { 
    display: flex; 
} 
div { 
    flex: 1; 
    margin: 1em; 
} 
img { 
    max-width: 100%; 
}