This question already has answers here:
Maintain the aspect ratio of a div with CSS
(37 answers)
Closed 9 years ago.
I'm looking for a solution where I have a div that grows dynamically depending on the content while maintaining a 1:1 aspect ratio. I've found many solutions where the size of the box is relative to the pages width rather than its content (like this). IE8 compatibility would be a big plus!
A JavaScript solution would work too, but I'd prefer a CSS solution.
Thanks a bunch!
So the answer to your question(s) is/ are:
I have a div that grows dynamically depending on the content
Use 'float' (shrink-to-fit) or 'display: inline-block' for the (containing) DIV element.
while maintaining a 1:1 aspect ratio
To achieve this you can use 'padding-top' or 'padding-bottom' with a percentage value representing the desired aspect ratio (in case of 1:1 it will be 100%) on a 'dummy' element, which will be a child of the containing DIV. The second child then will be absolute positioned (remember to relative position the containing DIV).
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
And if the height is actually heigher than the height set by the width, you additionally need
overflow: auto;
max-height: 100%;
for your element.
That's it - DEMO
You can set the element to have a 1x1 ratio using a function like:
function set_1x1_ratio(el){
//set auto size
el.width('');
el.height('');
var max = Math.max(el.width(), el.height());
el.width(max);
el.height(max);
}
And call that whenever you dynamic adding happens. Like this.
Alternatively you could use a mutation observer to call it whenever the element changes. Like this.
Related
So, I am using the Slick slider and wanted to apply some code only when the slider is active.
.specialist-description-wrapper {
height: 0rem;
}
.slick-current.slick-active .specialist-description-wrapper {
height: 20rem;
}
But the problem is, I don't want to have a fixed height. I want an "Auto" height so if my content gets bigger then it'll fit automatically. If I try to make height from 0rem to Auto then "Transition" doesn't work.
So, I have decided to use JavaScript to calculate the height of the element.
let descriptionWrapper = document.querySelector(".slick-current.slick-active .specialist-description-wrapper")
let height = descriptionWrapper.offsetHeight
descriptionWrapper.style.height = height;
But it's not working for me. Did I miss something?
Keeping the height to auto will only take height used by itself and will not take full height.
To make the height responsively adjust according to the parent's height, you can use
height: 100%;
This will make the element take all the height of its parent element.
But still, if anything breaks, you can adjust the content of the element. Because the 100% height is important.
Also, you have not provided enough code regarding your markup. Please always provide the code so that everyone can write better answers for you.
Sorry, I'm new to using the Javascript DOM and after my research I couldn't find anything. then i decided to post here
For example:
When I type
console.log(window.innerHeight);
it outputs 633.
then I create an html element and give its height a value of 633px look like:
width: 100%;
height: 633px;
I want this html element to look like a full page, but I cannot
height: 100%
because a different html element will come under it.
When the page height changes, the html element whose height I set as 633px is broken
the main question: Is there a way to equalize the window.innerHeight output with the height of the html element?
I'm not sure why you have two html elements on the same page but setting that aside... How does the second one come in? Does it get loaded via JavaScript? If so, you could make sure the first html id has an id like "" and use javascript to do something like this after the new one gets loaded:
var element = document.getElementById('whatever');
element.style.height = window.innerHeight + 'px';
This can be more easily solved using CSS using the relative units vw and vh. This unit is relative to the viewport. It can be used like this:
.fullscreen {
width: 100vw;
height: 100vh;
}
This example will always remain 100% of both width and height of the viewport and will therefor also scale responsively.
I'm trying a more fluid design.
I want specific divs to be a percentage of the overall body. I also want to set fluid / liquid padding within each div.
<body>
<div class='image'></div>
<div class='fourty'></div>
<div class='sixty'></div>
</body>
CSS:
body {
margin-top: 85px;
min-height: 100%;
}
.image {
content: image_url('something.jpg');
width: 100%;
height: auto;
}
/*I'm assuming the padding I'm setting is a percentage of the .fourty
div not the overall body. Granted, width is 100%.*/
.fourty{
padding: 4% 8%;
min-height: 40%;
width: 100%;
}
.sixty{
padding: 4% 8%;
min-height: 60%;
width: 100%;
}
The problem I'm having is that the percentage height does not seem to take effect for these divs. It seems to just be an auto height based off the contents of the div.
How do I correct / achieve this? I'm open to a JS solution, but would be more interested as to how to accomplish this in CSS.
As far as CSS goes, there are no styles that you can apply to make an element's height equal to a certain percentage of the total document (body) height.
CSS does, however, offer you options to style an element's heights to a certain percentage of the viewport height (using VH units), but since this does not achieve your goal, I'll leave you with a javascript answer that does.
Relevant javascript functions:
function getDocumentHeight() {
return Math.max(document.body.scrollHeight, document.documentElement.scrollHeight, document.body.offsetHeight, document.documentElement.offsetHeight, document.documentElement.clientHeight);
};
function setDivHeight(target, percentage) {
var desiredHeight = getDocumentHeight() * (percentage/100)
target.style.height = desiredHeight + 'px';
};
To set the height initially and on viewport resizes:
var targetDiv = document.getElementById('target');
setDivHeight(targetDiv);
window.addEventListener('resize', setDivHeight.bind(null, targetDiv))
The problem I'm having is that the percentage height does not seem to take effect for these divs. It seems to just be an auto height based off the contents of the div.
That is correct. The reason is that your code is in violation of the spec.
From the W3C height property definition:
percentage Specifies a percentage height. The percentage is calculated with respect to the height of the generated box's
containing block. If the height of the containing block is not
specified explicitly and this element is not absolutely positioned, the value computes to 'auto'.
auto The height depends on the values of other properties.
In other words, if you're going to use percentage values, you'll need to use the height property from top to bottom.
From the browser's perspective, min-height (and max-height) don't adhere to this rule and, therefore, as the spec says, they compute to auto.
DEMO (with your code, revised)
Read more here: Working with the CSS height property and percentage values
As an aside, I think its safe to say that the height definition is thoroughly obsolete. It hasn't been updated since 1998 (CSS2) and there are many ways for establishing the height of a box. Confining percentage heights to only the height property doesn't make much sense anymore.
Firefox seems to agree. Recent versions now accept flex heights, as well. See examples here:
Height is not correct in flexbox items in Chrome
Chrome / Safari not filling 100% height of flex parent
Flexbox in Chrome--How to limit size of nested elements?
I'm trying to use this plugin Galleria in its responsive mode, which basically means it will re draw itself based on its container size as the window re-sizes. The demo on the link I've provided shows a really good example. You can see that, as you resize your window, the whole gallery adjusts accordingly. Now my issue is, the plugin won't let me initialize the gallery unless a height has been specified for the DOM element that is used as its container. This means, I've had to write a whole lot of javascript code to respond window resizes - it destroys the point of it having a responsive mode quite a bit - but in the website above, nowhere can I find an explicit height specified. Can someone explain to me where I'm going wrong?
I figured it out by myself. Posting my answer -
When initializing the gallery - specify your height in percentages - as below. I'm guessing it takes 50% of window height as its value in this case. This way, you don't need to explicitly specify heights anywhere and it works as advertised
Galleria.run('#gallery', {responsive:true, height:0.5, debug:false});
Galleria needs a height to initialise correctly. You can do this either via CSS or JS.
If you would like it to fill the width and height of the screen, I would recommend setting a width and height of 100% via CSS. And its parent container needs to be 100%. See below.
**JS:**
Galleria.run('#galleria', {
responsive:true,
showCounter:true,
thumbnails:false,
trueFullscreen:true,
});
**CSS:**
#galleria{
width:100%;
height: 100%;
position: fixed;
z-index: 9999;
top:0px;
bottom: 0px;
}
body,html{
height:100%;
width:100%;
}
The height option ( if it's < 2.0) is relative to the width of the container. So height:0.5 would have a height that is half the width of the container (w=2, h=1).
height:1.5 would result in (w=2, h=3)
To keep it responsive you can use max-width rather than width when styling the container.
If the height option is set to 2.0 or more, it is interpreted as pixels. So height:2.0 will only be 2px tall.
Is it possible to resize a background image on load using javascript? I don't care about dynamically resizing the image according to window size or anything, I just want to take large images and resize them to a specific width and height so that the full image fits inside a specific layout.
WORK AROUND:
I did what the people below said and used a regular tag that I sized accordingly and positioned absolutely in the containing div. I then used the z-index property to push it to the background.
img.background {
position: absolute;
top: 0;
left: 0;
width: 960px;
z-index: 0;
}
It's not possible to [reliably, x-browser] scale a background image in any way at this point, but it is available in CSS3 (spec) so hope exists for the future.
Use an actual if you want to scale, in which case yes of course you can resize whenever you wish.
Background images cannot be resized.
Your best call is to use an <img> with position:absolute