I have website that uses percentages so it can support many screen resolutions.
Lets say your screenresolution is: 1920x1080 (1080p FULL HD)
I set width of element (let's say 15%), but for some reasons I can't set height (not the problem).
How do I make a div and set it's height based on calculated height in pixels.
In other words, the width becomes 1920*0.15=288px width. How to automatically make the height 288px?
Use padding wisely:
#someElement {
width: 15%;
height: 0; // this line is important! otwerwise height + padding > width
padding-bottom: 15%;
}
DEMO HERE
This is for 1:1, but you can choose any ratio you want.
You will need to use jQuery. An example:
$('#element').height($('#element').innerwidth());
Should set the element's height to its innerWidth (which excludes border and margin).
If you want to set dimensions for an anchor tag, you must give it display:block; or display:inline-block;
If you want a any element to achieve 100% height, you must set it to position:absolute;.
Related
Whatever I try I can not adjust the iframe's height on my website. I have tried height="100%" and in CSS
iframe {
height: 100%;
}
link to it and my code (inspect)
https://jandjcards.netlify.app/
Have you tried using an absolute unit like vh, vw or px? If you use percentage the width and height of the iframe will depend on the parent element. However, using other relative units will allow you to change the width and height of the element properly.
Absolute measurement units:
VH (Relative to 1% of the height of the viewport)
VW (Relative to 1% of the width of the viewport)
PX (Pixels)
REM (Relative to font-size of the root element)
First solution
Try including this:
iframe{
width: 20vw;
/* Use whichever unit you want except percentage */
}
If you want more informaton about absolute and relative css units I recommend you this website:
https://www.w3schools.com/CSSref/css_units.asp
Second solution
If you still want to use percentage, you will need to resize the parent element of the iframe. Basically all the elements whose display is "block" will expand itself horizontally all it cans, but will set its height to whatever it has inside. So if you use percentage to resize an iframe it will adopt the height of the parent element and that's not the idea.
Try resizing the parent element like this:
#container{
height: 10vw;
}
iframe{
height: 80%;
}
I hope this helps!
I have a fluid container and I want its height to gradually change based on the width of the window (since the with of the div is 100%).
Note that the desired behavior is similar to the one when the aspect-ratio css rule is applied, which is a linear gradual increase/decrease.
Such variation should stop at a certain min and max height.
I understand that some js might be required, so I am open to it if css alone fails.
You should look into different available units of width in css. Mainly the vh and vw. In the example below you can see a div, with a height of 10% of viewport width, and width of 10% of viewport height.
div {
width: 10vh;
height: 10vw;
background-color: red;
}
<div>Custom div</div>
recently I found an responsive website which changes the image contents in different size of screen. When the screen size is big like desktop computer, the content of the div is like(there is no other text content, just a div filled with an image using background-image):
#div {
background-image: url('images/pc-content01.jpg');
background: no-repeat center center;
height: 1129px;
}
When the screen size gets smaller, the css style changes like:
#div {
background-image: url('images/pc-content01.jpg');
background-size: cover;
height: 0;
padding-bottom: 95.5%;
}
And the background image will be swap to another image when the screen size is as small as moblie devices.
And my question is, how the percentage of padding-bottom is calculated, why percentage in height is not working but percentage on padding-bottom works?
(I understand why percentage on height is not working).
In padding percentages refer to the width of the containing block. In this case is used to maintain the aspect ratio (the image one) when the width changes. It is a trick often used in responsive design. A box with an intrinsic ratio. Percentage in height works differently
The percentage is calculated with respect to the height of the
generated box's containing block...
MDN, so is not suitable for that purpose.
When using a percentage value for paddings, it always refers to the width of the element. See MDN. So in this case the padding-bottom of #div would be 95.5% of its width. When setting percentage value for height it calculates it by using the height of the containing block. See MDN
Height in percentage
Height using percentage only works if we give height using percentage to the body and html of the page, it will not work otherwise.
Like this-
html, body{
height:100%;
background:black;
}
body>div{
height:50%;
background:gray;
}
<body>
<div>HI</div>
</body>
Padding-bottom in percentage
But in the case of percentage on padding-bottom, it works irrespective to the body or HTML. It only checks the width of the containing element.
Like this -
html, body{
background:black;
}
div{
background:gray;
padding-bottom:20%;
}
<body>
<div>HI</div>
</body>
I want to add background-image to the div element so it would act like a baclground-image in the body (here is an example http://plnkr.co/edit/gFZZgPmSKMDu3gZEp1H0?p=preview ) - it changes its width and height depending on screen size. And when i add the same code to the div element it does not work.
Example look of how it should work http://thegreatdiscontent.com/
If I'm understanding you correctly, you need to give the div element a percentage width and auto height.
.imageContainer {
width:100%;
height:auto;
}
This will make sure the image retains its ratio as the browser window is resized.
From my point of view, it's just the "max" width, so why it will create fluid images and take full space to its' container?
Thanks.
It will not make the image "take full space to it's container" - it just won't allow the img element to be any wider than it's container.
If the image's native size is larger than it's container, then it will be the full width. If it's native size is smaller than it's container, then max-width:100% will have no effect.
Instead of just rendering at its native width and overflowing its containing box, the image would render at its native dimensions as long as its width didn’t exceed the width of its container.
The max-width property is used to set the maximum width of an element.
max-width: none;
(default) No maximum width.
max-width: 100px;
Defines the maximum width in px, cm, etc. (This is what you think)
max-width: 80%;
Defines the maximum width in percent of the containing block
max-width: initial;
Sets this property to its default value.
max-width: inherit;
Inherits this property from its parent element.