div中的图片未显示

Question

我遇到问题，DIV内的照片未显示。 由于我使用的是砌体网格，而网站就像是Pinterest，我不想限制图像或内部的高度，所以我把auto，但是当我把auto，或100％，图像没有显示时，我的代码在下面。

.inner {
    background-color: rgb(255, 255, 255);
    padding-bottom: 40px;
    height:auto;
    position: relative;
    overflow: hidden;
    border: 2px solid #ECECEC;
    margin-bottom: 30px;
}

.image-box {
	position:relative;
   height: auto;
    width: 100%;
    padding-right: 0px;
    padding-left: 0px;
    background-position: center;
    background-color: #4D4E56;
}

.image-box .img{
	width: 100%;
    display: block;
   float: left;
	background-repeat: no-repeat;
    background-size: cover;
	
}

<div class="inner">
  <a href="{{ link }}"><div class="image-box" style="background-image:url(http://placehold.it/350x550)"></div></a>

</div>

Answer 1

您的图片div的高度设置为auto，尽管该div中没有​​内容。这意味着div的高度实际上是0。

将您的身高更改为设定值，您应该能够看到图像。

.image-box {
    position:relative;
    height: 150px;
    width: 100%;
    padding-right: 0px;
    padding-left: 0px;
    background-position: center;
    background-color: #4D4E56;
}

是的，这限制了你不想要的高度，但你想要它怎么样？您可以通过添加以下内容轻松缩放图像以很好地填充div并保持比率：

background-size:cover;

Answer 2

使用这个：

.image-box {
    height: 350px;;
    width: 500px;
    padding-right: 0px;
    padding-left: 0px;
    background-position: center;
    background-color: #4D4E56;
    background-image:url(http://placehold.it/350x550);
}

<强> HTML

<div class="inner">
    <a href="{{ link }}">
        <div class="image-box"></div>
    </a>
</div>

demo

Answer 3

当然它没有显示，因为背景图像的div没有高度，因为它是空的......

如果您不想使用身高，请将padding-bottom:40px的{​​{1}}添加到.inner

并且.image-box没用，因为.image-box img不存在。您的图片与div img不同，而不是单个background-image元素。

所以在img上使用你想要的css而不是在不存在的.image-box

上

＆＃13;

＆＃13;

.image-box img

＆＃13;

.inner {
    background-color: rgb(255, 255, 255);

    height:auto;
    position: relative;
    overflow: hidden;
    border: 2px solid #ECECEC;
    margin-bottom: 30px;
}

.image-box {
	position:relative;
   height: auto;
    width: 100%;
    padding-right: 0px;
    padding-left: 0px;
    background-position: center;
    background-color: #4D4E56;
        padding-bottom: 40px;
  background-repeat: no-repeat;
    background-size: cover;
   float: left;
   
}

＆＃13;

＆＃13;

＆＃13;

Answer 4

你的HTML不对，它应该是这样的：

<div class="inner">
  <a href="{{ link }}"><span class="image-box" style="background-image:url(http://placehold.it/350x550)"></span></a>
</div>

使用<span>代替<div>。 .image-box .img{}样式也不正确，因为其中没有img标记。最后你的CSS应该像下面的答案一样完成：

.image-box{
    height: 350px;
    width: 500px;
    padding-right: 0px;
    padding-left: 0px;
    background-position: center;
    background-color: #4D4E56;
    background-image:url(http://placehold.it/350x550);
}

Answer 5

背景资料：

背景图片不算作CSS中的内容，因为它只是一种分配给元素的样式，如background-color。这意味着auto将无法正常工作，因为您的div中实际上没有任何内容，因此它与之无关。

如何修复它：

要解决此问题，您需要将width和height设置为实际值，以便div必须具有实际大小。

修改后的代码：

.inner {
  background-color: rgb(255, 255, 255);
  padding-bottom: 40px;
  height: auto;
  position: relative;
  overflow: hidden;
  border: 2px solid #ECECEC;
  margin-bottom: 30px;
}
.image-box {
  position: relative;
  height: 550px;
  width: 100%;
  padding-right: 0px;
  padding-left: 0px;
  background-position: center;
  background-color: #4D4E56;
}
.image-box .img {
  width: 100%;
  display: block;
  float: left;
  background-repeat: no-repeat;
  background-size: cover;
}

<div class="inner">
  <a href="{{ link }}"><div class="image-box" style="background-image:url(http://placehold.it/350x550)"></div></a>

</div>