Maintain aspect ratio of div but fill screen width and height in CSS?
There is now a new CSS property specified to address this: object-fit
.
https://developer.mozilla.org/en-US/docs/Web/CSS/object-fit
The feature is widely supported by now (http://caniuse.com/#feat=object-fit).
Div height 100% and expands to fit content
Here is what you should do in the CSS style, on the main div
display: block;
overflow: auto;
And do not touch height
height of a div to match the height of the viewport
Yes, it's possible. CSS percentage height will work as long as the parent element has a height defined. Assuming this is your markup:
<html>
<body>
<div></div>
</body>
</html>
This CSS will cause the <div>
to have the full height of the viewport:
html, body, div {
height: 100%;
}
If you wanted the <div>
to expand with its content, the CSS would change as follows:
html, body {
height: 100%;
}
div {
min-height: 100%;
}
Scale div with its content to fit window
let outer = document.getElementById('outer'),
wrapper = document.getElementById('wrap'),
maxWidth = outer.clientWidth,
maxHeight = outer.clientHeight;
window.addEventListener("resize", resize);
resize();
function resize(){let scale,
width = window.innerWidth,
height = window.innerHeight,
isMax = width >= maxWidth && height >= maxHeight;
scale = Math.min(width/maxWidth, height/maxHeight);
outer.style.transform = isMax?'':'scale(' + scale + ')';
wrapper.style.width = isMax?'':maxWidth * scale;
wrapper.style.height = isMax?'':maxHeight * scale;
}
body {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
background: #e6e9f0;
margin: 10px 0;
}
#wrap {
position: relative;
width: 640px;
height: 480px;
margin: 0 auto;
}
#outer {
position: relative;
width: 640px;
height: 280px;
background: url('https://source.unsplash.com/random') no-repeat center center;
transform-origin: 0% 50%;
border-radius: 10px;
box-shadow: 0px 3px 25px rgba(0, 0, 0, 0.2);
overflow: hidden;
}
#outer:before {
content: "";
position: absolute;
bottom: 0;
width: 100%;
height: 100px;
-webkit-backdrop-filter: blur(20px);
backdrop-filter: blur(20px);
}
#profile {
background: url('https://source.unsplash.com/random/300x300') no-repeat center center;
position: absolute;
width: 60px;
height: 60px;
bottom: 0;
margin: 20px;
border-radius: 100px;
background-size: contain;
}
#content {
font-size: 20px;
position: absolute;
left: 0px;
bottom: 0;
margin: 30px 100px;
color: white;
text-shadow: 0 1px 2px rgba(0,0,0,0.5);
}
#content div:last-child {
font-size: 15px;
opacity: 0.7;
}
<div id="wrap">
<div id="outer">
<div id="profile"></div>
<div id="content">
<div>Monwell Partee</div>
<div>UX / UI Designer</div>
</div>
</div>
</div>
How can an html element fill out 100% of the remaining screen height, using css only?
The trick to this is specifying 100% height on the html and body elements.
Some browsers look to the parent elements (html, body) to calculate the height.
<html>
<body>
<div id="Header">
</div>
<div id="Content">
</div>
</body>
</html>
html, body
{
height: 100%;
}
#Header
{
width: 960px;
height: 150px;
}
#Content
{
height: 100%;
width: 960px;
}
Font scaling based on size of container
If the container is not the body, CSS Tricks covers all of your options in Fitting Text to a Container.
If the container is the body, what you are looking for is Viewport-percentage lengths:
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. However, when the value of overflow on the root element is auto, any scroll bars are assumed not to exist.
The values are:
vw
(% of the viewport width)vh
(% of the viewport height)vi
(1% of the viewport size in the direction of the root element's inline axis)vb
(1% of the viewport size in the direction of the root element's block axis)vmin
(the smaller ofvw
orvh
)vmax
(the larger orvw
orvh
)
1 v* is equal to 1% of the initial containing block.
Using it looks like this:
p {
font-size: 4vw;
}
As you can see, when the viewport width increases, so do the font-size
, without needing to use media queries.
These values are a sizing unit, just like px
or em
, so they can be used to size other elements as well, such as width, margin, or padding.
Browser support is pretty good, but you'll likely need a fallback, such as:
p {
font-size: 16px;
font-size: 4vw;
}
Check out the support statistics: http://caniuse.com/#feat=viewport-units.
Also, check out CSS-Tricks for a broader look: Viewport Sized Typography
Here's a nice article about setting minimum/maximum sizes and exercising a bit more control over the sizes: Precise control over responsive typography
And here's an article about setting your size using calc() so that the text fills the viewport: http://codepen.io/CrocoDillon/pen/fBJxu
Also, please view this article, which uses a technique dubbed 'molten leading' to adjust the line-height as well. Molten Leading in CSS
Related Topics
Less CSS Set Dynamic Background Image with Mixin
How to Set Textarea Width with CSS
How to Access Two Ids in One CSS Selector
How to Change CSS Based on Mobile Device
Flex-Grow Not Working in Internet Explorer 11
Chrome Developer Tools Style Tab Showing Faded CSS Definition, Why
Bootstrap Container with Position:Absolute Loses Layout Inside
How to Have Multiple Svg Images in a Single File
Override Bootstrap Container Width
Applying Comic Sans Ms Font Style
How to Use The .Clearfix Class
Why Can't an <Ul> (With Absolute Position) Inside a <Li> (With Relative Position) Auto Size
How to Align Text to The Middle of an Element with CSS in Twitter Bootstrap
Does The Shadow Dom Replace: :Before and: :After
When and Why Should We Use View Encapsulation in Angular
Styling Overlapping Annotations in Text with HTML <Span> Tags and CSS