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;
    }

}

这非常适合缩放图像，但无论屏幕宽度如何，高度在314px都保持不变。我能做些什么才能使身高适当缩放（即没有红色的窥视！）

编辑：这是一个jsfiddle链接：http://jsfiddle.net/mqs9qzvf/。没有图片，但是当“屏幕”（在这种情况下，查看窗格）宽度低于708 px时，您可以看到div高度不会改变。

Answer 1

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

我在这里做了一个小提琴：http://jsfiddle.net/3oas7xnp/

这仅适用于608x314大小的矩形。如您所见，padding-bottom展开了容器height的{{1}}。要想出这里使用的div号码，你需要计算：

% %的{{1}}是什么height。在这种情况下，314是608的百分之几。

314/608 = 51.64
什么是width的51.64％。在这种情况下，宽度为86％。

0.5164 * 86 = 44.4104％

正如您所看到的，此方法确实有效，但只不过是一种解决方法。如果偶然所有这些width具有相同的大小，请随意使用此方法。

div调整大小时缩放高度到宽度

1 个答案: