Question

我的容器内容有问题。因为我已经设置了一些方法来使背景图像的高度等于我的容器。我的问题是，当我在容器中放入一个内容时，它会检测到我设置的不可见图像。

这是我的代码：

<div class="parent">
  <div class="hidden-image">
    <img src="http://placehold.it/350x350" />
  </div>
  <h1>
    text
  </h1>
</div>

CSS：

.parent {
  border: 1px solid red;
  width: 350px;
  height: auto;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  background: url('http://placehold.it/350x350');
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center center;
}
.parent img {
  visibility: hidden;
  width: 100%;
  height: auto;
}

如果你检查我的小提琴，文字会向右移动，因为我认为这是因为我设定的图像。

小提琴： https://jsfiddle.net/kdu9691c/

Answer 1

这是因为visibility: hidden不会从流中删除元素。它仍然占据通常的空间，它只是看不见。您可以尝试在图像或文本div上使用position: absolute;或者，如果想法只是为了保持div一定比例以匹配图像，请谷歌css padded box aspect ratio进行一些简洁的解决方法。您还可以选择background-size: cover，根据您的特定约束条件，这可能会有所帮助。

如何将div的大小设置为等于背景图像的大小？

1 个答案: