如何让div高度自动调整到背景大小？

也许这可以提供帮助,但这不是一个背景,但你明白了:

    
    
Hi there

很确定这一直都不会在这里看到.但如果您的问题与我的问题相同,那么这就是我的解决方案:

.imaged-container{
  background-image:url('<%= asset_path("landing-page.png") %> ');
  background-repeat: no-repeat;
  background-size: 100%;
  height: 65vw;
}

我想在图像的中心有一个div,这将允许我这样做.

有一个纯CSS解决方案,其他答案已错过.

"content:"属性主要用于将文本内容插入元素,但也可用于插入图像内容.

.my-div:before {
    content: url("image.png");
}

这将导致div将其高度调整为图像的实际像素大小.要调整宽度,请添加:

.my-div {
    display: inline-block;
}

您可以在服务器端执行:通过测量图像然后设置div大小,或者使用JS加载图像,读取它的属性然后设置DIV大小.

这是一个想法,将相同的图像作为IMG标记放在div中,但是给它可见性:隐藏+使用位置相对来玩+给这个div作为背景图像.

我有这个问题并找到了Hasanavi的答案,但是我在宽屏幕上显示背景图像时遇到了一个小错误 - 背景图像没有扩散到整个屏幕宽度.

所以这是我的解决方案 - 基于Hasanavi的代码,但更好......这应该适用于超宽屏和移动屏幕.

/*WIDE SCREEN SUPPORT*/
@media screen and (min-width: 769px) { 
    div {
        background-image: url('http://www.pets4homes.co.uk/images/articles/1111/large/feline-influenza-all-about-cat-flu-5239fffd61ddf.jpg');
        background-size: cover;
        background-repeat: no-repeat;
        width: 100%;
        height: 0;
        padding-top: 66.64%; /* (img-height / img-width * container-width) */
                    /* (853 / 1280 * 100) */
    }
}

/*MOBILE SUPPORT*/
@media screen and (max-width: 768px) {
    div {
        background-image: url('http://www.pets4homes.co.uk/images/articles/1111/large/feline-influenza-all-about-cat-flu-5239fffd61ddf.jpg');
        background-size: contain;
        background-repeat: no-repeat;
        width: 100%;
        height: 0;
        padding-top: 66.64%; /* (img-height / img-width * container-width) */
                    /* (853 / 1280 * 100) */
    }
}

您可能已经注意到,该background-size: contain;属性不适合超宽屏幕,并且该background-size: cover;属性不适合移动屏幕,因此我使用此@media属性来调整屏幕大小并解决此问题.