使用CSS保持div的宽高比

如果您希望div的宽度不是100%,则需要另一个包装div来设置宽度:

div.ar-outer{
    width: 60%; /* container; whatever width you want */
    margin: 0 auto; /* centered if you like */
}
div.ar {
    width:100%; /* 100% of width of container */
    padding-bottom: 75%; /* 75% of width of container */
    position:relative;
}
div.ar-inner {
    position: absolute;
    top: 0; bottom: 0; left: 0; right: 0;
}

我最近使用类似于Elliot的图像技巧,允许我使用CSS媒体查询根据设备分辨率提供不同的徽标文件,但仍然按比例按比例缩放(我将徽标设置为背景图像为透明.png具有正确的宽高比).但是Web_Designer的解决方案会为我节省一个http请求.

正如在w3schools.com上所述并在此接受的答案中有所重申,填充值为百分比(强调我的):

以包含元素宽度的百分比指定填充

Ergo,保持16:9宽高比的响应式DIV的正确示例如下:

CSS

.parent {
    position: relative;
    width: 100%;
}
.child {
    position: relative;
    padding-bottom: calc(100% * 9 / 16);
}
.child > div {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
}

HTML

    

        
Aspect is kept when resizing
    

演示JSFiddle

由于@ web-tiki已经显示了使用vh/的方法vw,我还需要一种在屏幕中居的方法,这里是9:16肖像的片段代码.

.container {
  width: 100vw;
  height: calc(100vw * 16 / 9);
  transform: translateY(calc((100vw * 16 / 9 - 100vh) / -2));
}

translateY将这个中心保留在屏幕上.calc(100vw * 16 / 9)预计9月16日的高度.(100vw * 16 / 9 - 100vh)是溢出高度,因此,拉起overflow height/2将使其保持在屏幕中心.

对于风景,并保持16:9,你显示使用

.container {
  width: 100vw;
  height: calc(100vw * 9 / 16);
  transform: translateY(calc((100vw * 9 / 16 - 100vh) / -2));
}

9/16的比例很容易改变,不需要预定义100:56.25或100:75.如果你想先确保高度,你应该切换宽度和高度,例如height:100vh;width: calc(100vh * 9 / 16)9:16的肖像.

如果您想要适应不同的屏幕尺寸,您可能也会感兴趣

背景大小的封面/包含

上面的样式类似于包含,取决于宽度:高度比.

对象的合

覆盖/包含img/video标签

@media (orientation: portrait)/@media (orientation: landscape)

媒体查询portrait/ landscape更改比率.

基于你的解决方案,我已经做了一些技巧:

当您使用它时,您的HTML将是唯一的

    
Main content

以这种方式使用它:CSS:

*[data-keep-ratio] {
    display: block;
    width: 100%;
    position: relative;
}
*[data-keep-ratio] > * {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
}

和js(jQuery)

$('*[data-keep-ratio]').each(function(){ 
    var ratio = $(this).data('keep-ratio');
    $(this).css('padding-bottom', ratio);
});

有了这个,你只需将attr设置data-keep-ratio为高度/宽度即可.

这是对已接受答案的改进:

使用伪元素而不是包装器div

宽高比基于框的宽度而不是其父级

当内容变得更高时,盒子将垂直伸展

.box {
  margin-top: 1em;
  margin-bottom: 1em;
  background-color: #CCC;
}

.fixed-ar::before {
  content: "";
  float: left;
  width: 1px;
  margin-left: -1px;
}
.fixed-ar::after {
  content: "";
  display: table;
  clear: both;
}

.fixed-ar-16-9::before {
  padding-top: 56.25%;
}
.fixed-ar-3-2::before {
  padding-top: 66.66%;
}
.fixed-ar-4-3::before {
  padding-top: 75%;
}
.fixed-ar-1-1::before {
  padding-top: 100%;
}

.width-50 {
  display: inline-block;
  width: 50%;
}
.width-20 {
  display: inline-block;
  width: 20%;
}

16:9 full width

16:9

16:9
3:2
4:3
1:1

16:9
16:9

.container {
  position: relative;
}
.content {
  position: absolute;
  top:0; left:0; right:0; bottom:0;
}

  
  

    I'm square
  

  
  

    I'm square
  

.ratio {
  display: grid;
}
.ratio > * {
  grid-area: 1/1/1/1;
}

.ratio {
  display: grid;
}
.ratio > * {
  grid-area: 1/1/1/1;
}

/* below code NOT needed for setting the ratio 
 * I just wanted to mark it visually
 * and center contents
 */
.ratio div {
  border: 1px solid red;
  display: flex;
  align-items: center;
  justify-content: center;
}

[data-aspect-ratio] {
    display: block;
    max-width: 100%;
    position: relative;

    &:before {
        content: '';
        display: block;
    }

    > * {
        display: block;
        height: 100%;
        left: 0;
        position: absolute;
        top: 0;
        width: 100%;
    }
}
[data-aspect-ratio="3:1"]:before {
    padding-top: 33.33%;
}
[data-aspect-ratio="2:1"]:before {
    padding-top: 50%;
}
[data-aspect-ratio="16:9"]:before {
    padding-top: 56.25%;
}
[data-aspect-ratio="3:2"]:before {
    padding-top: 66.66%;
}
[data-aspect-ratio="4:3"]:before {
    padding-top: 75%;
}
[data-aspect-ratio="1:1"]:before {
    padding-top: 100%;
}
[data-aspect-ratio="3:4"]:before {
    padding-top: 133.33%;
}
[data-aspect-ratio="2:3"]:before {
    padding-top: 150%;
}
[data-aspect-ratio="9:16"]:before {
    padding-top: 177.77%;
}
[data-aspect-ratio="1:2"]:before {
    padding-top: 200%;
}
[data-aspect-ratio="1:3"]:before {
    padding-top: 300%;
}