is there any way to resize both width and height of a div in correlation with the browser resize using css? I have already achieved width resize but can't find how to resize the height in correlation.
Use viewport-percentage lengths:
5.1.2. Viewport-percentage lengths: the ‘vw’, ‘vh’, ‘vmin’, ‘vmax’ units
The viewport-percentage lengths are relative to the size of the initial containing block. When the height or width of the initial containing block is changed, they are scaled accordingly.
If you wanted to create a square that maintains an aspect ratio, you could use:
Example Here
.maintain-aspect-ratio {
width: 25%;
height: 25vw;
}
These lengths are supported in most modern browsers - support can be found here.
If you want an alternative with more browser support, you could always use the padding-top trick to maintain the aspect ratio.
Alternative Example
.maintain-aspect-ratio {
position: relative;
width: 25%;
background: red;
}
.maintain-aspect-ratio:before {
content: '';
display: block;
padding-top: 100%; /* 1:1 ratio */
}
Related
For example: I have an element which takes the full width of the viewport. I want its min-height to be half of its width, to get a ratio of 1:2.
On a 1600px wide desktop monitor the element's width would be about 1583px (monitor width minus scrollbar width), but its min-height would be 800px, because vw doesn't substract the scrollbar's width. So that would not be a 1:2 ratio.
An easy solution would be padding-top: 50%;, but if there's text within the element, that doesn't work. Alternative: a left floating pseudo element ::before with padding-top: 50%; would create the desired min-height in the ratio of 1:2, but that would be kinda hacky.
Am I missing something? Is there any clean way?
First thing you should do is include the following so the default padding and margins given by the web browser are removed:
* {
padding: 0;
margin: 0;
}
For the element you want to have 100vw and half height:
.half_height{
width: 100vw;
aspect-ratio: 2/1;
}
.container {
Width: calc(100vw - calc(100vw -100%));
Height: 50vh;
}
I don't know if the title is quite correct, but what I want basically is to create a div element that stays proportional to the resolution of the screen. For example, if the width is 1900px I want that the div have:
width: 1115px;
height: 775px;
But if the width of the page is 1050px I want:
width: 620px;
height: 430px;
What should be my CSS to allow this?
So I want that the width is a percentage of the screen, let's say, and the height is based on the width.
There are two solutions to make the element proportional to the screen, one which depends on your setup.
You can use percentage
width: 20%;
But this only defines a percentage of the parent element, and does not make both your width and height proportional
You can also use viewport units. This defines a percentage of the viewport. If you use viewport width vw you can get a height which is dependent on the width.
height: 10vw; /*10% of viewport width*/
width: 10vw;
You do have to be aware that this is relatively new, so do not forget to check "known issues" on caniuse.com
You can also setup media queries to handle smaller or bigger screens.
#media (max-width: 300px) {/*10% of 300px is very small, so we change it to 90%*/
.selector {
width: 90vw;
}
}
Here is the solution, simply you should calculate the desired aspect ratio, i.e. width/height:
Maintain the aspect ratio of a div with CSS
You can use CSS media queries, like this:
.selector {
width: 1115px;
heigth: 775px;
}
#media (max-width: 1050px) {
.selector {
width: 620px;
height: 430px;
}
}
I'm trying to scale an SVG according to user's viewport width
I have this css:
.thesvg {
padding: 0;
line-height: 0;
margin: 0;
width: 50%;
max-width: 360px;
}
It scales as it should horizontally, and the aspect is kept
But it adds whitespace/padding to the top/bottom (and maintains original element height) instead of scaling down entirely
But only in some browsers.. or I think so (maybe because of different viewport sizes)
Is this a bug? Or how can I fix this and achieve a perfectly fluid SVG just by managing the width (if possible)?
This question already has answers here:
Maintain the aspect ratio of a div with CSS
(37 answers)
Closed 6 years ago.
Im making a responsive design, which has to keep the proportions of its elements (height to width) no matter what the screen size is, so i don't know the size in pixels for any of the elements and i can work only in %.
I can set either the width or the height as a % of the browser size, but the i have no idea how to set the other property value.
That using only CSS, making JS calculate the values is not an option.
I came across this problem last year and found an obscure solution after some tedious researching. Unfortunately it involves wrapper DIVs. The structure is simple - you have a parent DIV which contains the contents container and another DIV that sets the proportions. You set the margin-top of the 'proportion' DIV as percent of the width of the parent... Example:
#parent {
position: relative;
}
.proportions {
margin-top: 75%; /* makes parent height to 75% of it's width (4:3) */
}
.container { /* contents container with 100% width and height of #parent */
position: absolute;
top: 0px;
left: 0px;
bottom: 0px;
right: 0px;
}
http://jsfiddle.net/twpTU/
Use CSS calc() https://developer.mozilla.org/en-US/docs/Web/CSS/calc
It has pretty good adoption for modern browsers http://caniuse.com/calc as a fall back use CSS media queries and have min widths and heights to fall back on.
Obviously you could always just calculate both percentages in advance.
Div1 needs a height of 60% and the width needs to be 1/4th the height. 60% * .25 = width: 15%
div {
position: absolute;
border: 2px solid black
}
#div1 {
width: 40%;
height: calc(40% * 1.2);
}
#div2 {
width: calc(90% / 4);
height: 90%;
}
http://jsfiddle.net/pU4QA/
First, I know that the OP has clearly mentioned that he is not looking for any Javascript approach, however I think it might be useful for couple of people who are still open to use Javascript as well.
Here is the answer; To set the size for both width and height in the same percentage, you can set the width of the parent element to width: 100%; via CSS, then with Javascript you set the height of the parent to the size of width. Then you would have a square-shaped element as the parent.
Now you can apply both width: 10%; height: 10%; to the child elements. Then only things you need to do in order to keep it responsive is to listen for the window resize event and then you apply the height again only to the parent, and all children will be updated.
http://jsfiddle.net/sDzHb/
Something like this will keep it responsive to the browser size:
$(window)
.resize(function() {
var w = $(document).width();
$('.parent').height(w);
})
.trigger( 'resize' );
I have some text within p tags, and in my css I have:
p {
min-width: 100px;
max-width: 400px
font-size: 24vw;
}
I would like the text to change in size depending on the viewport width, but to be constrained to a minimum and maximum width.
EDIT:
Here is a working example
Used to this css
Demo
p { min-width: 100px;
max-width: 400px;
font-size: 24px; }
You have some missing in your css ...
To set a dynamic font size based on viewport width, and have constraints on the maximum and minimum element widths, use the max/min-width properties to set the width limits, and the 'vw'(viewport-width) attribute to get a font-size unit relative to the viewport width.
Use the code as stated in the original question:
p {
min-width: 100px;
max-width: 400px
font-size: 24vw;
}
The Original code I posted worked fine, I just had little experience with code at the time.
Here is a working example