即使在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> -->

09-11 01:54
查看更多