关于html：响应地改变div大小保持宽高比


Responsively change div size keeping aspect ratio

本问题已经有最佳答案，请猛点这里访问。

当我给一个图像一个百分比的宽度或高度时，它只会增长/收缩，保持其纵横比，但是如果我希望与另一个元素具有相同的效果，是否可以使用百分比将宽度和高度绑定在一起？

你可以使用纯CSS，JavaScript的；好的员工。本utilizes(somewhat counterintuitive)的事实，这是相对的padding-toppercentages含块的宽度。这里有一个定义：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
.wrapper {
  width: 50%;
  /* whatever width you want */
  display: inline-block;
  position: relative;
}
.wrapper:after {
  padding-top: 56.25%;
  /* 16:9 ratio */
  display: block;
  content: '';
}
.main {
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
  left: 0;
  /* fill parent */
  background-color: deepskyblue;
  /* let's see it! */
  color: white;
}
1
    This is your div with the specified aspect ratio.

相关讨论

bumming了克里斯"的理念，另一个选项是使用伪元素，所以你不需要使用一个内部的元素总是对的。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
<style>
.square {
    /* width within the parent.
       can be any percentage. */
    width: 100%;
}
.square:before {
    content:"";
    float: left;

    /* essentially the aspect ratio. 100% means the
       div will remain 100% as tall as it is wide, or
       square in other words.  */
    padding-bottom: 100%;
}
/* this is a clearfix. you can use whatever
   clearfix you usually use, add
   overflow:hidden to the parent element,
   or simply float the parent container. */
.square:after {
    content:"";
    display: table;
    clear: both;
}
</style>

  Square
  <p>
This div will maintain its aspect ratio.
</p>

我已经把这里和演示：/ / / / / iqndr codepen.io tcmulder笔

编辑：

现在，bumming"艾萨克"的理念，它的正常使用，这在现代browsers说这是大众的单位力比值(虽然我不会因为他也使用VH的比值的变化将意味着或说基于窗口的高度)。

所以，本simplifies的东西：

1
2
3
4
5
6
7
8
9
10
11
12
13
<style>
.square {
    /* width within the parent (could use vw instead of course) */
    width: 50%;
    /* set aspect ratio */
    height: 50vw;
}
</style>

  Square
  <p>
This div will maintain its aspect ratio.
</p>

我已经把这里：修改的演示和codepen.io https:/ / / / / / mdojrg tcmulder笔吗？editors = 1100

另外，你可以设置最大高度、最大宽度，和/或最小高度，最小宽度，如果你不想要它，它ridiculously变大的或小的，因为它是基于浏览器的，现在的位置和宽度将变的很干净，但shrink indefinitely /集装箱。

注意你的员工也可以量表内容的元素，如果你设置字体大小，和所有的这innards大众测量电磁测量和演示，和这里的*，codepen.io：https:/ / / / / vbjqlv tcmulder笔吗？editors = 1100

相关讨论

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<style>
#aspectRatio
{
  position:fixed;
  left:0px;
  top:0px;
  width:60vw;
  height:40vw;
  border:1px solid;
  font-size:10vw;
}
</style>
<body>
Aspect Ratio?
</body>

这件事值得注意的是，这里的关键vw= = viewport vhviewport的宽度和高度

相关讨论

这是我们的解决方案

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
.main {
    width: 100%;
}
.container {
    width: 30%;
    float: right;
    position: relative;
}
.sizing {
    width: 100%;
    padding-bottom: 50%;
    visibility: hidden;
}
.content {
    width: 100%;
    height: 100%;
    background-color: red;
    position: absolute;
    margin-top: -50%;
}

http：/ / / / / 3 jsfiddle.net ag4fs

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
(function( $ ) {
  $.fn.keepRatio = function(which) {
      var $this = $(this);
      var w = $this.width();
      var h = $this.height();
      var ratio = w/h;
      $(window).resize(function() {
          switch(which) {
              case 'width':
                  var nh = $this.width() / ratio;
                  $this.css('height', nh + 'px');
                  break;
              case 'height':
                  var nw = $this.height() * ratio;
                  $this.css('width', nw + 'px');
                  break;
          }
      });

  }
})( jQuery );      

$(document).ready(function(){
    $('#foo').keepRatio('width');
});

工作领域：/ / / / / 1 jsfiddle.net qtftx

相关讨论