If I have multiple images with different aspect ratios, but want them all to be resized such that the widths are equal, but the height is changed so that original aspect ratio is maintained, I can do this with JS and math but is there a short css solution?
I think that's why object-fit property comes
it really helpful in your case and it usually used with Object-position
Yes, simply set the width using CSS and not set the height and the height will be adjusted for you while maintaining the aspect ratio.
img { width: 100px }
<img src=https://i.stack.imgur.com/w5PGK.jpg">
But note the if you worry that the height may turn out to be exceedingly large, you can also use max-height to limit it. But doing so may distort the image:
img { width: 100px; max-height: 160px }
<img src=https://i.stack.imgur.com/w5PGK.jpg">
One solution is just to set a max-width and max-height on the image:
img { max-width: 100px; max-height: 120px }
<img src=https://i.stack.imgur.com/w5PGK.jpg">
and the image will be contained in the box with the proper aspect ratio.
There are also techniques such as to create a viewing box of a fixed size, and set overflow: hidden to limit the display area to the size of the box, while setting a fixed width for the image:
.image-box { width: 100px; height: 100px; overflow: hidden }
.image-box img { width: 100px }
<div class="image-box">
<img src=https://i.stack.imgur.com/w5PGK.jpg">
</div>
I am trying to set a <div> to a certain percentage height in CSS, but it just remains the same size as the content inside it. When I remove the HTML 5 <!DOCTYTPE html> however, it works, the <div> taking up the whole page as desired. I want the page to validate, so what should I do?
I have this CSS on the <div>, which has an ID of page:
#page {
padding: 10px;
background-color: white;
height: 90% !important;
}
I am trying to set a div to a certain percentage height in CSS
Percentage of what?
To set a percentage height, its parent element(*) must have an explicit height. This is fairly self-evident, in that if you leave height as auto, the block will take the height of its content... but if the content itself has a height expressed in terms of percentage of the parent you've made yourself a little Catch 22. The browser gives up and just uses the content height.
So the parent of the div must have an explicit height property. Whilst that height can also be a percentage if you want, that just moves the problem up to the next level.
If you want to make the div height a percentage of the viewport height, every ancestor of the div, including <html> and <body>, have to have height: 100%, so there is a chain of explicit percentage heights down to the div.
(*: or, if the div is positioned, the ‘containing block’, which is the nearest ancestor to also be positioned.)
Alternatively, all modern browsers and IE>=9 support new CSS units relative to viewport height (vh) and viewport width (vw):
div {
height:100vh;
}
See here for more info.
You need to set the height on the <html> and <body> elements as well; otherwise, they will only be large enough to fit the content. For example:
<!DOCTYPE html>
<title>Example of 100% width and height</title>
<style>
html, body { height: 100%; margin: 0; }
div { height: 100%; width: 100%; background: red; }
</style>
<div></div>
bobince's answer will let you know in which cases "height: XX%;" will or won't work.
If you want to create an element with a set ratio (height: % of it's own width), use the aspect-ratio property. Make sure height is not explicitly set on the element for it to work. https://developer.mozilla.org/en-US/docs/Web/CSS/aspect-ratio
.square {
width: 100%;
height: unset;
aspect-ratio: 1 / 1;
}
Historically, the best way to do this was to set the height using padding-bottom. Example for square:
<div class="square-container">
<div class="square-content">
<!-- put your content in here -->
</div>
</div>
.square-container { /* any display: block; element */
position: relative;
height: 0;
padding-bottom: 100%; /* of parent width */
}
.square-content {
position: absolute;
left: 0;
top: 0;
height: 100%;
width: 100%;
}
The square container will just be made of padding, and the content will expand to fill the container. Long article from 2009 on this subject: http://alistapart.com/article/creating-intrinsic-ratios-for-video
In order to use percentage(%), you must define the % of its parent element. If you use body{height: 100%} it will not work because its parent have no percentage in height. In that case in order to work that body height you must add this in html{height:100%}
In other cases to get rid of that defining parent percentage you can use
body{height:100vh}
vh stands for viewport height
You can use 100vw / 100vh. CSS3 gives us viewport-relative units. 100vw means 100% of the viewport width. 100vh; 100% of the height.
<div style="display:flex; justify-content: space-between;background-color: lightyellow; width:100%; height:85vh">
<div style="width:70%; height: 100%; border: 2px dashed red"></div>
<div style="width:30%; height: 100%; border: 2px dashed red"></div>
</div>
Sometimes, you may want to conditionally set the height of a div, such as when the entire content is less than the height of the screen. Setting all parent elements to 100% will cut off content when it is longer than the screen size.
So, the way to get around this is to set the min-height:
Continue to let the parent elements automatically adjust their height
Then in your main div, subtract the pixel sizes of the header and footer div from 100vh (viewport units). In css, something like:
min-height: calc(100vh - 246px);
100vh is full length of the screen, minus the surrounding divs.
By setting min-height and not height, content longer than screen will continue to flow, instead of getting cut off.
With new CSS sizing properties you can get away with not setting exact height on parent. The new block-size and inline-size properties can be used like this:
<!DOCTYPE html>
<style>
#parent {
border: 1px dotted gray;
height: auto; /* auto values */
width: auto;
}
#wrapper {
background-color: violet;
writing-mode: vertical-lr;
block-size: 30%;
inline-size: 70%;
}
#child {
background-color: wheat;
writing-mode: horizontal-tb;
width: 30%; /* set to 100% if you don't want to expose wrapper */
height: 70%; /* none of the parent has exact height set */
}
</style>
<body>
<div id=parent>
<div id=wrapper>
<div id=child>Lorem ipsum dollar...</div>
Resize the browser window in full page mode. I think the values are relative to viewport height and width.
For more info refer: https://www.w3.org/TR/css-sizing-3/
Almost all browsers support it: https://caniuse.com/?search=inline-size
I was trying to achieve a header with a height proportional to the screen and containing an image with a title. The attempted solution used a row flex layout. The intention is to have the header a proportion of the viewport/parent height (20%). The width of the image and its parent should match the scaled image width according to the image's aspect ratio. The title's parent div should occupy the remaining width and grow to fill any available horizontal space.
The container is using fixed positioning with a proportional height.
The actual behaviour in Chrome 54 and Firefox 50 is that the image's parent element occupies most of the container width and this width is dictated by the image's actual width (not the scaled width of the image). I don't understand this when the image is scaled down to a fraction of that width.
Example reproducing this behaviour here: https://jsfiddle.net/uy66as8k/
HTML:
<div class="container">
<div class="img-view">
<img src="http://lorempixel.com/800/600/"></img>
</div>
<div class="title-view">
<h1>This is the Title</h1>
</div>
</div
CSS:
.container {
display: flex;
flex-direction: row;
width: 100%;
height: 20%;
margin: 0;
position: fixed;
left: 0;
top: 0;
}
.img-view {
background-color: salmon;
flex: 0 0 auto;
}
.title-view {
background-color: cyan;
flex: 1 0 auto;
}
img {
max-height: 100%;
max-width: 100%;
}
Desired result:
Actual result:
Just set your image container to have a height of 100%.
.img-view {
height: 100%;
...
}
Explanation: Okay so first and foremost you have your container set at 20% of whatever its parent is. In this case its the body. You're pulling in images with random dimensions so you're encountering a situation where their dimensions are exceed their parent containers (.container, .image-view).
The max-height/max-width properties that are assigned to all the images won't know its max until you explicitly set a height on its parent (.image-view). Once that's done it'll constrain itself properly as seen in the fiddle below.
https://jsfiddle.net/uy66as8k/3/
I am trying to make an image resizable.
I have a specific height for this image: height: 100% (inside a container) and a width: auto; (i want the width to be adapted to the height about the natural image size).
Everything works fine when i access the page, but when i resize the window, the height is correctly resized, but the width keeps its initial value, i want it to be proportional (like when i access the page for the first time) to the height.
Is there a way to do it in CSS ? If not, what is the more optimize solution ?
Here is an illustration in code:
HTML
<div class="container">
<img alt="test" src="/img/test.png">
</div>
CSS
.container {
height: 100px;
width: 100%;
}
.container img {
height: 100%;
width: auto; //i need it to be adapted to each height about the natural image's dimensions
}
UPDATE
Here is a jsfiddle
http://jsfiddle.net/CRGj6/1/
Sometime it works sometime it doesn't...
window resize affects only the width of the element but not the height. It is kinda make sense because if you resize the height, more content is scrollable that means don't do anything to width but to increase the scrollbar length (so more content to be scrolled). Assuming that you want to preserve the aspect ratio of the image,
.wrapper .container img {
position: relative;
height: auto;
width: 100%;
}
would be the solution to this problem.
I have an image and I want the height to be constant.
The width I want to be 100% of the container.
However, as you shrink the container, I want the image to truncate the right hand side so it doesn't go out of proportion.
You want the height to be 100% and the visible width to be 100%. Something like this:
<div id="container"><img src="http://mypic.jpeg" /></div>
div#container { height: 200px; width: 150px; overflow: hidden; }
div#container img { height: 100%;}