MR.Don't know MR.Don't know - 3 months ago 8
CSS Question

Image inside div doesn't show

I have a problem, photo inside the DIV is not shown.
Since I use the masonry grid and site is like Pinterest, I do not want to limit the height of image or inner, so I put the auto, but when I put the auto, or 100%, the image is not displayed, My code is below.



.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>




Lee Lee
Answer

Your height of your image div is set to auto, although there is no content inside that div. This means the div's height is actually 0.

Change your height to a set value, and you should be able to see the image.

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

Yes, this limits the height which is what you don't want, but how else do you want it? You can easily scale the images to fill the div nicely and keeping ratio by adding:

background-size:cover;
Comments