0

我有一个 flexbox 容器，我试图在其中并排显示两个带有阴影的图像。即使图像大小不同，我也希望它们占据相同数量的水平空间。我正在使用样式为“display：flex”的容器，并为图像使用“object-fit：contain”以使其缩放。如果我不给容器一个特定的高度，我的代码就可以工作。如果我给容器一个特定的高度，例如 300 像素，图像会按比例缩小，但阴影会出现在距图像边缘一定距离的地方，就好像有一个盒子包裹着它们一样。这似乎是奇怪的行为。谁能解释这种看起来很奇怪的行为，有没有办法可以给容器一个高度并且仍然让它工作？

小提琴来说明：https ://jsfiddle.net/Lej1a6vp/

html:

 <div class="container">
    <img class="image" src="http://via.placeholder.com/300x400" />   
    <img class="image" src="http://via.placeholder.com/400x300" />
  </div>

CSS：

.container {
  display: flex;
  margin: 1em auto 3em auto;
  width: 500px;
  height: 200px;
  justify-content: center;
  align-items: center;
}
img {
  box-shadow: 8px -8px 10px #00000080;
  height: 100%;
  width: 40%;
  margin-left: 1em;
  object-fit: contain;
}
4

2 回答 2

0

如果您将高度设置为自动，它将使它们具有相同的宽度但高度会不同，如果您希望它们具有相同的高度和宽度，那么您必须使用具有相同纵横比的图像才能工作，因为它如果纵横比不同，则不可能在不裁剪的情况下使其宽度和高度相同。有一个名为#FutureCSS 的属性aspect-ratio: 16 / 9;，您可以在其中将元素锁定为特定的比例，但它仍然不是在所有浏览器中都可用；

    .container {
  display: flex;
  margin: 1em auto 3em auto;
  width: 500px;
  height: auto;
  justify-content: center;
  align-items: center;
}


img {
  box-shadow: 8px -8px 10px #00000080;
  height: auto;
  width: 50%;
  margin-left: 1em;
  object-fit: contain;
}
于 2021-04-17T02:10:41.290 回答
0

BDB88 为我提供了我需要的线索，并为此感谢。我的目标是制作一个响应式布局，显示图像周围的阴影，而不是远处的一些幽灵般的轮廓，我想保持图像的纵横比。我还想为容器指定一个特定的高度，而不是让图像溢出它。我使用“身高：100%；” 因为 img 标签是导致问题的原因。将其与“宽度：40%；”相结合 导致冲突，因为这两个要求不能总是同时得到满足。通过更改为“最大高度：100%；” 和“最大宽度：40%；” 对于 img 标签，我得到了我所追求的行为。

.container {
  background: yellow;
  display: flex;
  margin: 1em auto 3em auto;
  width: auto;
  height: 200px;
  justify-content: center;
  align-items: center;
}
img {
  box-shadow: 8px -8px 10px #00000080;
  max-width: 40%;
  max-height: 100%;
  margin-left: 1em;
  object-fit: contain;
}
于 2021-04-17T23:41:24.057 回答