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/。没有图片，但您可以看到当 "screen"（在本例中为查看窗格）宽度低于 708 像素时，div 高度没有改变。

Answer 1

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

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

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

% 是 width 的 height。在这种情况下，314 是 608 的百分比。

314/608 = 51.64
width的 51.64% 是多少。在这种情况下，宽度为 86%。

0.5164 * 86 = 44.4104%

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

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

Scale height to width when div resizes

html

css