【发布时间】：2019-10-11 20:24:52
【问题描述】：
我正在寻找一个纯 CSS 解决方案来解决我在这里使用 jQuery 的帮助所做的事情。
基本上我有 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。请注意背景图像保持成比例，文本保持居中。
还想知道是否仅使用 CSS 是不可能的，如何使用 plain javascript 做到这一点，我需要将 id 添加到我的 div 中吗？
更新：这是一个简单的 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);
};
【问题讨论】：
-
仅使用 css 是不可能的，您可能可以将
calc与height: calc((1000px / 3) * .75)之类的公式一起用于footer但是当您调整窗口大小时它无济于事，只有js 将能够在调整大小并将高度设置为3/4的比例时捕获调整大小事件并计算每个像素 -
确实如此。没有 CSS 唯一的解决方案来解决这个问题。但是，如果您想编写更少的 JS，我相信您可以使用@Towkir 建议的公式来实现这一点，但您可以使用使用 JS 更新的 CSS 变量而不是
1000px。 -
@The24thDS 一个纯粹的
CSS解决方案是通过添加 5 行代码并为您提供所需的纵横比。 -
@Towkir 使用
calc不会使它成为纯粹的CSS解决方案吗？ -
@PeterDarmis 是的，
calc是一个纯 CSS 解决方案
标签： javascript html css height responsive