相应地改变div大小保持长宽比

当我给一个图像一个百分比的宽度或高度，它将增长/收缩保持其纵横比，但如果我想要同样的效果与另一个元素，它是否可能在所有的宽度和高度使用百分比一起?

(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');
});

工作示例:http://jsfiddle.net/QtftX/1/

2012-08-25 10:19:45

你可以使用纯CSS来做到这一点;不需要JavaScript。这利用了填充顶部百分比相对于包含块的宽度的事实(有点违反直觉)。这里有一个例子:

.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; } <div class="wrapper"> <div class="main"> This is your div with the specified aspect ratio. </div> </div>

2012-08-25 10:47:42

这就是我的解

<div class="main" style="width: 100%;">
    <div class="container">
        <div class="sizing"></div>
        <div class="content"></div>
    </div>
</div>

.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://jsfiddle.net/aG4Fs/3/

2013-11-05 11:25:47

<style>
#aspectRatio
{
  position:fixed;
  left:0px;
  top:0px;
  width:60vw;
  height:40vw;
  border:1px solid;
  font-size:10vw;
}
</style>
<body>
<div id="aspectRatio">Aspect Ratio?</div>
</body>

这里需要注意的关键是vw =视口宽度，vh =视口高度

2014-05-15 08:37:22

对于Chris的想法，另一种选择是使用伪元素，这样就不需要使用绝对定位的内部元素。

<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>
<div class="square">
  <h1>Square</h1>
  <p>This div will maintain its aspect ratio.</p>
</div>

我在这里整理了一个演示:http://codepen.io/tcmulder/pen/iqnDr

编辑:

现在，不考虑Isaac的想法，在现代浏览器中使用vw单位来强制宽高比更容易(尽管我不会像他那样也使用vh，否则宽高比会根据窗口高度而改变)。

所以，这简化了事情:

<style>
.square {
    /* width within the parent (could use vw instead of course) */
    width: 50%;
    /* set aspect ratio */
    height: 50vw;
}
</style>
<div class="square">
  <h1>Square</h1>
  <p>This div will maintain its aspect ratio.</p>
</div>

我在这里整理了一个修改过的演示:https://codepen.io/tcmulder/pen/MdojRG?editors=1100

你也可以设置max-height, max-width，和/或min-height, min-width，如果你不想让它变得非常大或小，因为它现在是基于浏览器的宽度，而不是容器，并且会无限地增长/收缩。

注意，如果您将字体大小设置为vw尺寸，所有内部尺寸设置为em尺寸，您也可以缩放元素内部的内容，这里有一个演示:https://codepen.io/tcmulder/pen/VBJqLV?editors=1100

2014-06-12 02:07:48

相应地改变div大小保持长宽比

推荐文章

最新文章

标签