223

画像にパーセントの幅または高さを与えると、アスペクト比を維持したまま拡大/縮小しますが、別の要素で同じ効果が必要な場合は、パーセントを使用して幅と高さを結び付けることはできますか？

4

5 に答える 5

544

純粋な CSS を使用してこれを行うことができます。JavaScript は必要ありません。padding-topこれは、パーセンテージが包含ブロックのwidthに対して相対的であるという (やや直感に反する) 事実を利用しています。次に例を示します。

.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-25T10:47:42.980 に答える
45

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 測定に設定すると、要素内のコンテンツをスケーリングすることもできます。 =1100

于 2014-06-12T02:07:48.673 に答える
31 
<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-15T08:37:22.070 に答える
3

それが私の解決策です

<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-05T11:25:47.707 に答える
2 
(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-25T10:19:45.007 に答える