0

我有一个容器image-wrapper和里面的图像。

容器具有固定的高度和宽度。在其中，图像分辨率将是动态的。

我要做的就是将图像水平和垂直居中放置在容器中，并box-shadow对其应用一些样式。

但是它在图像周围留下了一个空白区域，看起来很奇怪。下面是代码。垂直图像也会发生同样的情况。

.image-wrapper {
  height: 400px;
  width: 400px;
  background-color: rgb(0,200,100);
  padding: 40px;
}

.image-wrapper img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  box-shadow: 10px 10px 10px red;
}
<div class="image-wrapper">
  <img src="https://via.placeholder.com/500x200">
</div>

我只想在图像周围有一个阴影，没有空格。我想我在这里遗漏了一件非常简单的事情。

我试图添加position: relative到容器中，但它没有用。

我试图通过搜索“ css object fit image shadow ”、“ css object fit on image 添加空格”之类的东西来搜索它，但没有找到任何类似的东西。

4

3 回答 3

1

删除height: 100%;andobject-fit: contain;从.image-wrapper img

此外，height: 400px;从.image-wrapper.

要使图像居中，请使用 CSS Grid：（顺便说一句，在这种情况下不需要居中）

display: grid;
place-items: center;


.image-wrapper {
  width: 500px;
  background-color: rgb(0, 200, 100);
  padding: 40px;
  display: grid;
  place-items: center;
}

.image-wrapper img {
  width: 100%;
  box-shadow: 10px 10px 10px red;
}
<div class="image-wrapper">
  <img src="https://via.placeholder.com/500x1000">
</div>

一些有用的资源：

于 2021-03-29T13:44:09.703 回答
1

我没有裁剪和使用 Flexbox 的解决方案：

.image-wrapper {
  height: 100%;
  width: 500px;
  background-color: rgb(0,200,100);
  padding: 40px;
  display : flex;
  justify-content: center;
  align-items: center;
}

.image-wrapper img {
  width: 100%;
  object-fit: contain;
  box-shadow: 10px 10px 10px red;
}
<div class="image-wrapper">
  <img src="https://via.placeholder.com/500x1000">
</div>

于 2021-03-29T13:48:55.487 回答
0

考虑这个解决方案：

根据要求，

  1. 容器具有固定的高度和宽度。因此，在类中添加了以下内容.image-wrapper
      height: 400px;
      width: 400px;
  1. 图像将在容器中水平和垂直居中。因此，在类中添加了以下内容.image-wrapper
      display: flex;
      align-items: center;
      justify-content: center;
  1. 为了防止添加 box-shadow 时图像周围出现空白，而不是 height 和 width，将 max-height 和 max-width 添加到img. 这将防止图像的高度和宽度超过 400px 父级，并且图像的纵横比也将保持不变。
      max-width: 100%;
      max-height: 100%;

总的来说，这是解决方案： 

.image-wrapper {
  height: 400px;
  width: 400px;
  background-color: rgb(0, 200, 100);
  padding: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.image-wrapper img {
  max-width: 100%;
  max-height: 100%;
  box-shadow: 10px 10px 10px red;
}
<div class="image-wrapper">
  <img src="https://via.placeholder.com/500x200">
</div>

<div class="image-wrapper">
  <img src="https://via.placeholder.com/500x1000">
</div>

于 2021-10-24T14:37:41.037 回答