Question

我所有的搜索都告诉我做出img {max-height: 100%}，但这似乎没有任何效果。我不知道是否已设置父容器（earth-block）的高度，为什么设置img高度不会将图像限制在该大小。enter image description here

.earth-block {
    height: 200px;
}

.earth-block img{
    max-height: 100%;
}

<div class="earth">
            <div class="wrapper">
<div class="earth-block"><img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRZj1KyXPz468xvFWikAXA-dPkMu14q-XuB3dKKl9LF6Bl4SO-oTw&s" alt="earth"></div>
            </div>
        </div>

Answer 1

这会帮助您

<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
<style>
.earth-block {
    height: 200px;
    background-color: aliceblue;
    display: flex;
}

.earth-block img{
    flex-grow: 100;
    object-fit: none;
    object-position: center; 
}
</style>
</head>
<body>
<div class="earth">
    <div class="wrapper">
        <div class="earth-block"><img src="https://cdn.pixabay.com/photo/2016/10/20/18/35/sunrise-1756274__340.jpg" alt="earth"></div>
    </div>
</div>
</body>
</html>

调整图像大小以适合div

1 个答案: