Fit div size to background image

Question

I\'m trying to set the size (both width and height) of a div to match it\'s background image size, but I can\'t get it working. The background image size has to be in percen

Answer 1

tag cannot adapt to background-image size, you need to use an tag and choose between height: auto for the div or javascript

// **** Problem ****

// Wrong html :
<div class="my_class"><div>

// with css :
.my_class {
    width: 100%;
    height: 100%;
    background-image: url(/images/my-image.jpg);
    background-size: 100%;
    background-position: center;
    background-repeat: no-repeat;
}

//****  Solution ****

// use css:
.my_class {
    width: 100%;
    height: 100%;
    background-image: url(/images/my-image.jpg);
    background-size: contain;
}

Answer 2

*{
    padding: 0;
    margin: 0;
}


div{
    width: 100%;
}
div figure{
    padding-top: 36.56%;  /* 702px/1920px = 0.3656 */
    display: block;
    background: url("https://st.fl.ru/images/landing/bg2.jpg") no-repeat center top;
    background-size: cover;  
}

<div>    
    <figure></figure>
</div>

Answer 3

you can have a responsive height using the padding-bottom or padding-top because you can't fix an height property in '%' with a width in '%'.

div{

	background-image: url(url);
	background-repeat: no-repeat;
	background-size: 100% 100%;
	background-position: center;

	margin: 0 auto;

	width: 100%;
	padding-bottom:  heightPicure / widthPicture + %; //do it manually or using scss rules

}