即使在max-width: 100%
元素上使用了max-height: 100%
和img
之后,其右侧的宽度也仍然有明显的空白。为什么不填充容器?
看起来max-height可以完美工作;我的想法是,此空白是由于实际图像的大小引起的吗?无论如何,有反应地填充容器吗?
html, body {
background: #f2edea;
height: 100%;
width: 100%;
}
img {
max-width: 100%;
max-height: 100%;
}
.front-side {
width: 300px;
height: 400px;
border: 3px solid red;
position: relative;
backface-visibility: hidden;
padding: 0;
}
.back-side {
width: 300px;
height: 400px;
border: 3px solid green;
}
<div class='front-side'>
<img src='https://pre00.deviantart.net/4121/th/pre/i/2018/059/6/7/brigitte_by_raikoart-dc4kzas.png'>
</div>
<div class='back-side'>
<img src="https://img00.deviantart.net/e0ec/i/2017/297/8/c/mercy_by_raikoart-dbrm54b.png">
</div>
最佳答案
问题是img { max-width: 100%; max-height: 100%; }
-都使用max表示一旦击中一个值,它将停止。这类似于使用background-size: contain;
代替cover
。
将其更改为img { width: 100%; max-height: 100%; }
应该可以解决此问题,因为它将使其宽度为100%,但可以防止其过度延伸Y轴:
请注意,您的图像并非完全是3:4的比例,因此,当max-height
命中(400px)时,使用max-width
时宽度会停留在282.59px(因为您告诉浏览器“我想要这个宽度不能超过300px”,而不是“我希望此图像宽度为300px”。
所有这些都说明了,我会考虑按比例缩放图像,以使它们不会拉伸(我提供的解决方案会使它们比应有的宽度稍宽一些,使它们有些变形)
编辑:或者,您可以放下max-height: 100%;
,而是在父级上设置overflow-y: hidden;
来进行某种“人造作物”
html, body {
background: #f2edea;
height: 100%;
width: 100%;
}
img {
width: 100%;
}
/* .flipcard {
width: 300px;
height: 400px;
margin: auto;
top: 20%;
position: relative;
transition: transform 2s;
box-shadow: 5px 5px 20px #c4c4c4;
border: 3px solid black;
background: pink;
} */
/* .flipcard:hover {
transform: rotateY(180deg);
} */
.front-side {
overflow-y: hidden;
width: 300px;
height: 400px;
border: 3px solid red;
position: relative;
backface-visibility: hidden;
padding: 0;
}
.back-side {
width: 300px;
height: 400px;
/* transform: rotateY(180deg);
backface-visibility: hidden; */
/* position: absolute;
top: 0; */
border: 3px solid green;
}
<!-- <div class='flipcard'> -->
<div class='front-side'>
<img src='https://pre00.deviantart.net/4121/th/pre/i/2018/059/6/7/brigitte_by_raikoart-dc4kzas.png'>
</div>
<div class='back-side'>
<img src="https://img00.deviantart.net/e0ec/i/2017/297/8/c/mercy_by_raikoart-dbrm54b.png">
</div>
<!-- </div> -->