web-dev-qa-db-ja.com

幅に基づいてdivの高さを計算し、比率を維持する

私が支援するためにjQueryを使用してここで行ったことに対する純粋なCSSソリューションを探しています。

基本的に私は3つのdivをコンテナー内で幅に均等に広げています。高さは幅から計算され、3/4の比率が維持されます。さらに、各divには、比例したままの背景画像と、水平および垂直方向の中央に配置されたテキストがあります。

$(document).ready(function() {
  function setw() {
    var footdivwidth = $('footer div').width();
    var footdivheight = footdivwidth * .75;
    $('footer div').css({
      'height': footdivheight + 'px'
    });
    $('footer div span').html('w: ' + footdivwidth + '<br>h: ' + footdivheight);
  }
  setw();
  $(window).resize(function() {
    setw();
  })
});
FOOTER {
  max-width: 1000px;
  margin: 0 auto;
  background-color: rgba(0, 0, 0, 0.171);
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}

FOOTER DIV {
  background-image: url('https://learnwebdesign.online/img/bg.jpg');
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  flex: 1;
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
}

FOOTER DIV SPAN {
  display: inline-block;
  text-align: center;
  background-color: rgba(165, 165, 165, 0.282);
  padding: 7px 15px;
  border-radius: 3px;
  color: #FFFFFF;
  text-transform: uppercase;
  font-weight: bold;
  letter-spacing: 2px;
  font-size: 21px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<footer>
  <div><span>left photo</span></div>
  <div><span>center photo</span></div>
  <div><span>right photo and more text</span></div>
</footer>

これは私が持っているものを示すペンです。 https://codepen.io/nom3d/pen/arGpBV

これは、サイズを変更したときの効果を示すgifです。背景画像は比例したままで、テキストは中央揃えのままであることに注意してください。 3 box resize with proportions kept

また、CSSだけでは不可能なのではないかと考えています。これをplain javascriptで実行するには、divにIDを追加する必要がありますか？

更新：これは、このタスクを処理する単純なjavaScript関数です

function setHeight(el,val){
    var box = document.querySelectorAll(el);
    var i;
    for(i = 0;i < box.length;i++){
        var width = box[i].offsetWidth;
        var height = width * val;
        box[i].style.height = height + 'px';        
    }
}
// set your element to target and the ratio value
setHeight('footer div',.75);
window.onresize = function(event) {
    setHeight('footer div',.75);
};
javascripthtmlcssheightresponsive
12
drooh

これは、OPのコードを掘り下げたくなく、CSSで応答固定比率要素の解決策が必要なだけの人のための、より一般的な方法です。

基本的な考え方は、paddingパーセンテージとしては要素の幅に基づいて計算されるということです。つまり、_padding-bottom: 100%_ == _element.width_（この場合は正方形）です。比率を計算し、それをパディングに使用することで、そのトリックを乗っ取ることができます。

画像の例

画像のアスペクト比は少し変わっているので、_height: auto_を設定するだけで十分です。

比率：4：3

_img {
  --aspectRatio: calc(3/4 * 100%);
  display:block;
  width: 300px; // this one needs a width to work.
  height:var(--aspectRatio);
}_
_<img src="https://images.unsplash.com/photo-1559666126-84f389727b9a" />_

画像の背景

しかし、元のコンテンツ比率に関係なく、コンテナでサイズを管理したいとしますか？背景画像を使用するだけです。

これは16：9（通常のワイドスクリーン）

_.fixedAspect {
  --aspectRatio: calc(9/16 * 100%);
  height: 0;
  padding-bottom: var(--aspectRatio);
  background-size: cover;
  background-position: center center;
}_
<div class="fixedAspect" style="background-image: url(https://images.unsplash.com/photo-1559662780-c3bab6f7e00b)"></div>

コンテンツを含むHTML要素

_height:0_および一連のパディングを使用して要素にコンテンツを追加することは、おそらく最良の解決策ではありません。しかし、疑似クラスを使用することでこれを解決できます。 「最小の高さ」を強制する。

ボーナス：コンテンツが_position: absolute;_ラッパーのように定義したアスペクト比よりも大きい場合、これは壊れません。

_.fixedAspect {
  margin: 20px;
  background-color: #f6f3f0;
}

p {
  font-family: Helvetica, Arial, Sans-Serif;
  padding: 10px;
}

.fixedAspect:before {
  --aspectRatio: calc(5/20 * 100%);
  content: "";
  height:0;
  padding-top: var(--aspectRatio);
  
  /* so you can see the element */
  background-color: #F47E20;
  
  /* get this out of the way */
  float: left;
  width: 1px;
  margin-left:-1px;
}

.fixedAspect:after {
  /* we need to clear the float so its container respects height */
  content: "";
  display: table;
  clear: both;
}_
_<div class="fixedAspect">
  <p>My default size is a ratio of 20:5 but I'll grow if there's too much content.</p>
</div>_
0
Bryce Howitson