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;