图像不会响应容纳div的宽度

Question

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

Answer 1

问题是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> -->

Answer 2

您还可以使用object-fit css属性。

object-fit: cover;

可以完成工作，填充父容器保持率，并最终裁剪图像。图片必须有一个大小btw。

Object-fit CSS

html, body {
  background: #f2edea;
  height: 100%;
  width: 100%;
}

.front-side  {
  width: 300px;
  height: 400px;
  border: 3px solid red;
}

.back-side {
  width: 300px;
  height: 400px;
  border: 3px solid green;
}

img {
  display: block;
  object-fit: cover;
 }

  <img class="front-side" src='https://pre00.deviantart.net/4121/th/pre/i/2018/059/6/7/brigitte_by_raikoart-dc4kzas.png'>

<img class="back-side" src="https://img00.deviantart.net/e0ec/i/2017/297/8/c/mercy_by_raikoart-dbrm54b.png">

甚至不必使用div

问候