html - div 内的图像不显示

Question

我有一个问题，DIV 中的照片没有显示。由于我使用砌体网格并且网站就像 Pinterest，我不想限制图像或内部的高度，所以我放了自动，但是当我放自动或 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;