html - 当 div 调整大小时将高度缩放为宽度

Question

我有一个带有背景图片的 div，我想根据屏幕宽度进行缩放。我只对窄屏幕宽度的这种效果感兴趣，所以我使用媒体查询:

.the_image{
    margin:50px auto;
    background-image:url('myimage.png');
    background-color:red; /* This is to see the effect */
    background-position:top right;
    background-repeat:no-repeat;
    width:608px;
    height:314px;
}


@media (max-width: 708px){
    .the_image{
        width:86%;
        margin:50px 7%;
        background-size: contain;
    }

}

这对于缩放图像非常有用，除了无论屏幕宽度如何，高度都保持在 314 像素不变。我该怎么做才能使高度适当缩放(即，没有红色向外窥视!)

编辑: 这是一个 jsfiddle 链接:http://jsfiddle.net/mqs9qzvf/ .没有图片，但您可以看到当“屏幕”(在本例中为查看 Pane )宽度低于 708 像素时，div 高度没有改变。

Answer 1

如果不使用 JQuery，这是一件非常棘手的事情。如果您有一个 square div 或一个具有确定比例(如 16:9 左右)的矩形，这将很容易做到。有一种方法可以做到这一点，它要求您知道与 width 相比，height 的准确 %。

我在这里为它做了一个 fiddle :http://jsfiddle.net/3oas7xnp/

这仅适用于大小为 608x314 的矩形。如您所见，padding-bottom 扩展了容器 div 的 height。要得出要在此处使用的 % 数字，您需要这样计算:

1. % 是宽度 的高度。在这种情况下，314 是 608 的百分比。

   314/608 = 51.64

2. 宽度 的 51.64% 是多少。在本例中，宽度为 86%。

   0.5164 * 86 = 44.4104%

如您所见，此方法确实有效，但只是一种变通方法。如果碰巧所有这些 div 都具有相同的大小，请随意使用此方法。