<img/>有css prop：object-fit。当值为contain时：img将显示满，并且有白色（如果图像的比例与<img/>不同）。现在有一个div，有一个比率3/2。父节点是div，height和width是动态的，父节点没有比率。怎么能让孩子们总是在父母（包含）在任何比例的父母？
<img/>
object-fit
contain
div
3/2
height
width
disbfnqx1#
您可以设置img { max-width: 100%; max-height: 100%; }：
img { max-width: 100%; max-height: 100%; }
img { max-width: 100%; max-height: 100%; } div { outline: solid 1px blue; margin: 10px; display: flex; align-items: center; justify-content: center; } div:nth-child(1) { width: 100px; height: 100px; } div:nth-child(2) { width: 160px; height: 60px; } div:nth-child(3) { width: 60px; height: 80px; }
<div><img src="https://picsum.photos/300/200" alt=""></div> <div><img src="https://picsum.photos/300/200" alt=""></div> <div><img src="https://picsum.photos/300/200" alt=""></div>
1条答案
按热度按时间disbfnqx1#
您可以设置
img { max-width: 100%; max-height: 100%; }：