I'm new to using vh/vw values in css, but it's come in handy on my current project, where I want the main content container to fill the whole viewport height. This works fantastically until the viewport is shrunk vertically to around 200/300px, when the layout breaks.
What I want is for it to work exactly as it is (fill the whole screen) but to stop shrinking at a fixed pixel value. However, the following didn't work, as I'd hoped:
.container {
height: 90vh;
min-height: 400px;
}
Can anyone suggest a solution?
Thanks in advance.
main content container to fill the whole viewport height
.container {
height: 100vh;
min-height: 300px;
}
1vh — one equal 1/100 height of viewport.
Related
I have an image which width should be as large as possible and I want it's height to not exceed the height of the parent while also maintaining the aspect ratio of 16:9. The issue right now is, it works well till the screen size is 1591px, if it gets bigger than that, the height exceeds and the vertical scroll bar appears. I don't want that behavior. How can I achieve that?
the scrollBar appears because of the overflow you can do 2 things
use the "overflow: hidden;"
body{
overflow: hidden;
}
you can use max-width to determine the max-width of the element and set it on both of the elements
I hope it was helpful 😁
UPDATE: the original answer assumed from the question that the image was an HTML img. The solution was to set width to 100% [of its container] and height to 70vh and use object-fit.
However, it is not an img it is a canvas.
The required aspect ratio is known to be 16 / 9. This snippet therefore sets the max-width to 100% (of whatever is the container) and the max-height to 70vh.
This way there can never be any overflow and the canvas will be as big as it can be within those constraints.
body {
width: 100vw;
margin: 0;
}
canvas {
max-width: 100%;
max-height: 70vh;
aspect-ratio: 16 / 9;
background: green;
}
<canvas width="1600" height="900"></canvas>
I have a set of logos of variable size. I've set them all up at the same height of 50px with a width of auto:
.img-logo {
width: auto;
height: 50px;
}
This works fine until the window is resized. When the window is resized, wider logos flow outside of their container.
I would like the logos to shrink to fit their container width. I have tried to achieve this with max-width:
.img-logo {
max-width: 100%;
width: auto;
height: 50px;
}
This works but the aspect ratio is compromised due to the height property remaining 50px.
Any ideas?
With a fixed height and variable width either of the below can happen.
The img gets stretched to accommodate the variable width and skew the aspect ratio.
The img gets cropped (overflow:hidden) by the parent but the aspect ration is kept intact.
So you can make the img responsive too. But then it wont have the constant height, while keeping the aspect ratio intact.
I think it's impossible to keep its size when the window is too small and you didn't want to change ths size of image. Why not try #media,which can provide different css styles in different conditions.
I'm trying to achieve the last piece of my general template for articles in a wordpress blog.
I've got an header/menu which is position: fixed.
Then I have a div .postThumbnail with a child img which is position: fixed so the following content can overlap the img when scrolling.
I also have a div that copy the img'height as the image is fixed.
Fact is, this could be a lot easier if .postThumbnail had an height, but it's value is equal to 0.
I do not know why.
What I intend to do is to set .postThumbnail's max-height equal to the height of the viewport minus the height of the header/menu, so if an image is taller than the viewport, it won't overflow and the following content which can be scrolled will appears right after the image (and not after the total height of the image).
Basically, I need to define .postThumbnail's height so I can apply an overflow:hidden.
Any idea?
I created a JSFiddle so you can actually see what I'm talking about.
Some of the current code :
#single\.php .postThumbnail img {
position: fixed;
z-index: 1;
width: 100%;
min-width: 640px;
height: auto;
}
#single\.php .postThumbnailGhost { /*keep as security even if no content is integrated*/
visibility: hidden;
}
What I need to achieve :
#single\.php .postThumbnail{
max-height: calc(100vh - 48px);
overflow: hidden;
}
With this fixed, I could fix the rest of the page as the content's min-height must be equal to the image's height in order to cover it properly.
Well,
I really simplified everything since I don't need a .postThumbnailGhost in this new version.
I also made it in Jquery as I couldn't do it fully in CSS ( :'( ).
Here is the script that is doing the job :
function refreshDynamicContent(){
$('.postThumbnail').height($('.wp-post-image').height());
$('.postThumbnail').css('max-height', $(window).height() - ($('header').height()));
$('#post').css('min-height', $('.postThumbnail').height());
}
refreshDynamicContent();
$(window).on("resize", refreshDynamicContent);
New JSFiddle
And I don't need an overflow anymore because I can set the height to the window's height!
YAY!
I would like to have a CSS class and/or solution where the image is 100% width (with height being auto), but max its own size. Anyway to achieve that or do I need to specify max width image-by-image?
If you set:
width: 100%;
height: auto;
The image will be as bigger as its container is. The ratio between width and height will be kept.
If the image's width is lower then container's width then it will be scaled till it fits the available space. In this case you may want to use:
max-width: 100%;
height: auto;
This should do it:
img {
max-width: 100%;
height: auto;
}
If the window is bigger than the image, the image will not be scaled. If the window is smaller than the image, the image should scale. I noticed you said that it doesn't in your comment to Krasimir's answer. You might want to check and see if there is other CSS that may be changing this behaviour.
I cannot use JS, this should be archived by CSS only. Container (DIV) is auto width (flexible) "table-cell" element.
I'd want to scale image down only when it width is larger than container (user can resize window - that's the reason).
I've used code shown below but it work only on IE7.
max-width: 100%;
height: auto;
width: auto\9;
I've tried to find any working fix for IE9, but without success.
Your max-width needs to be set to the image size and then width to 100% like so:
img {
width: 100%;
max-width: 500px;
height: auto;
}
Of course, this means that your max-width must be dynamically set based off the image being loaded, which may not be practical.
I stumbled upon this old question while trying to do the exact same thing the OP was trying. I am answering for anyone who may land here. Upon examining http://jsfiddle.net/SAada/2/ mentioned by the OP, I found an interesting solution:
setting
height: auto;
will ensure that the image will not be stretched / scaled up. At the same time, setting
max-width: 100%
will ensure that if the parent element width is less than the image width, the image is scaled down.
Thus, the combination that works for me is:
img {
max-width: 100%;
height: auto;
}
Oh, and after some more search, I discovered that this technique is also used by Bootstrap for responsive images!