{var%20f='http://v.t.sina.com.cn/share/share.php?appkey=1515056452',u=z||d.location,p=['&url=',e(u),'&title=',e(t||d.title),'&source=',e(r),'&sourceUrl=',e(l),'&content=',c||'gb2312','&pic=',e(p||'')].join('');function%20a(){if(!window.open([f,p].join(''),'mb',['toolbar=0,status=0,resizable=1,width=440,height=430,left=',(s.width-440)/2,',top=',(s.height-430)/2].join('')))u.href=[f,p].join('');};if(/Firefox/.test(navigator.userAgent))setTimeout(a,0);else%20a();})(screen,document,encodeURIComponent,'','','https://www.manongdao.com/data/attach/logo/logo.png', '推荐 Rolldiameter 的问题《Calculate height of div based off width & maintain》','https://www.manongdao.com/q-760128.html','页面编码gb2312|utf-8默认gb2312'));){kind=link}
This question already has an answer here:
- Maintain the aspect ratio of a div with CSS 22 answers
I am looking for a pure CSS solution to what I have here done using jQuery to help.
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>Here is a pen showing what I have. https://codepen.io/nom3d/pen/arGpBV
Here is a gif showing the effect when resized. Note the background image staying proportional and text staying centered.
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?
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);
};
A quick pure
CSSsolution would involve to add toFOOTER DIVand add to
FOOTERPURE CSS FIX
Adjust width and height accordingly
You can Directly use given code, For making propostional width height, You have 2 different ways, one of them given below, you can use width in percentage and height with calc with the same,
another way give width in %, and instead of height you can give padding-bottom in percentage, the all are in same propostion.
Here's a more generic way to go about this for anyone who doesn't want to dig through the OP's code and just needs a solution to responsive fixed ratio elements with CSS.
The basic idea is that
paddingas a percentage is calculated based on the element's width. This means thatpadding-bottom: 100%==element.width(In this case a square). We can hijack that trick by calculating the ratio and using that for padding.Image Example
Images are a bit odd in that they already have an aspect ratio so you could simply set the
height: autoand be good to go.Ratio: 4:3
Image Background
But let's say you want the container to manage the size regardless of the original content ratio? Simply use a background image.
This one is 16:9 (typical widescreen)
HTML Element with content
Adding content to an element with a
height:0and a bunch of padding is probably not the best solution. But we can solve this by using a pseudo-class. To force a "minimum height".Bonus: This won't break if your content is bigger than the aspect ratio you've defined the way a
position: absolute;wrapper would.You can simply consider the basic trick for maitaining the aspect ratio using padding.
Here is an example where I kept both examples so you can compare, the one using jQuery and the other using pure CSS.
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.
For example, let's say you had an element with
width: 500px,height: 300pxandpadding: 10%. Now you might expect the top and bottom paddings to be 10% ofheight, and the left and right paddings to be 10% ofwidth. 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.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.
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:
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: