如何將圖像彎曲爲寬度？

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%; 
}