且构网

分享程序员开发的那些事...
且构网 - 分享程序员编程开发的那些事

使用CSS缩放对象元素高度与宽度成正比+常量

更新时间:2023-11-03 23:26:34

这是一个小提琴,使用略有不同的数字,但是设置说明一个与宽度加一些常数值成比例的想法为 height 。它是基于你的原创想法,与一个调整。

Here is a fiddle that uses slightly different numbers, but is set up to illustrate a "proportional to width plus some constant value" idea for the height. It is based on your original idea, with a tweak. It seemed to test fine in IE8+, Chrome, Firefox.

基本上,您需要的代码可能是这样:

Essentially, the code you would need is probably this:

#video-container {
    position:relative;
    width: 100%;
    height: 0px;
    padding-bottom: 56%; /* proportional scaling */
    padding-top: 50px; /* add constant */
}

#video-container object {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
}