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.59像素（因为您＆＃ 39;重新告诉浏览器＆＃34;我想要不再而不是300px宽＆＃34;不是＆＃34;我希望这个图像宽300px＆＃34;。

所有这些都说，我考虑将你的图像重新调整为你想要的比例，这样它们就不会拉伸（我提供的解决方案会使它们比它们应该稍微宽一点，扭曲它们一点点）

编辑：或者您可以放弃max-height: 100%;，而是在父级上设置overflow-y: hidden;来做一种＆＃34; faux crop＆＃34;

＆＃13;

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;


}

＆＃13;

<!-- <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> -->

＆＃13;

Answer 2

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

object-fit: cover;

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

Object-fit CSS

＆＃13;

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;
 }

＆＃13;

  <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">

＆＃13;

甚至不得不使用div

此致

图片不会响应容纳div

2 个答案: