根据宽度和宽度计算div的高度保持比例 [英] Calculate height of div based off width & maintain proportion

问题描述

我正在寻找一种纯CSS解决方案，以解决我在这里使用jQuery所提供的帮助.

I am looking for a pure CSS solution to what I have here done using jQuery to help.

基本上，我有3个div，它们在容器中的宽度均匀分布.它们保持3/4的比例，高度是根据宽度计算得出的.此外，每个div都有一个与背景成比例的背景图像以及一些水平和垂直居中的文本.

Basically I have 3 divs that spread evenly in width in a container. They maintain a 3/4 ration with the height being calculated off of the width. Furthermore, each div has a background image that stays proportional and some text that is centered horizontally and vertically.

$(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

Here is a pen showing what I have. https://codepen.io/nom3d/pen/arGpBV

这里是显示调整大小后效果的gif.请注意背景图像保持比例，文本保持居中.

Here is a gif showing the effect when resized. Note the background image staying proportional and text staying centered.

还想知道如果仅CSS不可能做到这一点，如何使用普通javascript 做到这一点，我是否需要将ID添加到我的div中?

Also wondering if it's not possible with just CSS, how to do this with plain javascript, would I need to add id's to my divs?

更新:这是一个简单的javaScript函数来处理此任务

Update: here is a plain javaScript function to handle this task

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

推荐答案

在CSS中保持特定的高度:宽度比率通常是通过利用填充百分比始终是 计算的事实来完成的. https://developer.mozilla.org/zh-CN/docs/Web/CSS/padding#Values"rel =" nofollow noreferrer>基于元素的宽度.

Maintaining specific height:width ratios in CSS is usually done by exploiting the fact that padding percentage is always calculated based on the element's width.

例如，假设您有一个包含width: 500px，height: 300px和padding: 10%的元素.现在，您可能希望顶部和底部填充为height的10％，而左侧和右侧填充为width的10％.但是，这将导致不相等的垂直和水平填充，这与预期的内容相反，即10％的相等填充.为了理解这一点，我们需要将填充百分比基于保存维度，并且该维度已被选择为宽度.

For example, let's say you had an element with width: 500px, height: 300px and padding: 10%. Now you might expect the top and bottom paddings to be 10% of height, and the left and right paddings to be 10% of width. However this would give unequal vertical and horizontal paddings which is counter-intuitive to what is intended - equal paddings of 10%. To make sense of this we need to base the padding percentage on the save dimension, and that dimension has been chosen to be the width.

因此，我们始终具有一个高度与宽度之比为3:4的元素，我们可以将高度设置为0，底部(或顶部)填充设置为宽度的3/4.

Thus to have an element with height:width ratio of 3:4 at all times we can set the height to 0 and the bottom (or top) padding to 3/4 of the width.

在您的示例中，Flex赋予每个项目33％的宽度.对于3:4的比率，底部填充应为33％* 3/4或24.74％.您的CSS可能看起来像:

In your example each item is given a width of 33% by Flex. For a ratio of 3:4 the bottom padding should be 33% * 3 / 4, or 24.74%. Your CSS might look like:

width: 33%;
height: 0;
padding-bottom: 24.75%;

请注意，由于高度为0，因此需要相对定位元素，并在其中放置绝对定位的包装器.如果尝试将内容直接放入div中，则会破坏比率.您上面的代码可以这样修改:

Note that since the height is 0, the element will need to be relatively positioned with an absolutely positioned wrapper inside it. If you attempt to put content directly in the div, it will break the ratio. Your code above could be modified thus:

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;
  position: relative;
  width: 33%;
  height: 0;
  padding-bottom: 24.75%;
}
footer div span {
  /* Used as content wrapper, with flex to centre content */
  position: absolute;
  top: 0; bottom: 0;
  left: 0; right: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  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;
}

<footer>
  <div><span>left photo</span></div>
  <div><span>center photo</span></div>
  <div><span>right photo and more text</span></div>
</footer>

这篇关于根据宽度和宽度计算div的高度保持比例的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！