当div调整大小时的比例高度到宽度

我有一个背景图像的div，我想用屏幕宽度进行缩放。我只在狭窄的屏幕宽度的这种效果有兴趣，所以我使用的是媒体查询：除了高度保持在314px相同的，无论屏幕宽度的当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; 
    } 

}

这个伟大的工程来缩放图像，。我可以做什么，以便高度适当地缩放（即，没有红色偷看！）

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

来源

2015-01-05 Rogare

http://stackoverflow.com/questions/15520623/css-image-layouting-before-image-loaded/15521298#15521298 – CBroe

在媒体查询中将高度设置为自动，应根据宽度按比例缩放。否则，它将继承媒体查询之外的高度。 –

嗨@CBroe，感谢您的其他答案的链接，虽然我特别在背景图片上寻找div效果。（所以我可以交换CSS文件中的高分辨率图像。） – Rogare

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

我已经做了捣鼓在这里：http://jsfiddle.net/3oas7xnp/

为矩形这只作品608x314大小。正如你所看到的，padding-bottom扩展了容器div的height。要拿出%数用在这里你需要计算这样：

什么%是widthheight。在这种情况下，314％的什么的608

六百〇八分之三百一十四= 51.64
什么是width 51.64％。在这种情况下，宽度是86％。

0.5164 * 86 = 44.4104％

正如你可以看到这个方法的工作，但并不比一个解决办法了。如果偶然所有这些divs将具有相同的大小，请随时使用此方法。

来源

2015-01-06 01:50:08

这样做的伎俩。谢谢你的清晰解释和小提琴。 – Rogare

完全没问题:)很高兴为你解决问题。 –

当div调整大小时的比例高度到宽度

回答

相关问题