This is my container:
.test {
height: 100vh;
}
update: This actually works without problem in firefox.
Which stretches to the full height of the webpage whenever the page is loaded, but when I resize the page vertically, it seems the viewport is not updated. In this first image, the div is the full height of the viewport:
However, when I resize the browser window vertically, the .test div is not updated - see image below.
To see for yourself, please check out the codepen here: http://codepen.io/anon/pen/CLbqy
Should I resize the window horizontally however, the height resets to the correct viewport height.
one possible suggestion is that you should use % instead vw or vh. Since we may not be able to give font-size in %, instead of px or em, we can use vw or similar kind of stuff.
And now if fonts given in vm they will not load the new change of window height and width if re-sized. So here is a small solution which I found in some random article.
causeRepaintsOn = $("#yourTagIdWithFontInVM");
$(window).resize(function() {
causeRepaintsOn.css("z-index", 1);
});
This is the link where I found the above solution. Link
This might be an issue with scrolling in the CodePen iframe. It worked better for me when I prevented the page from overflowing:
html, body {
margin:0;
padding:0
}
Related
Third time round redoing this because im not really fully able to understand my problem this time round im going to be a bit more detailed.
My problem starts here:
Problem
as I think it shows, you can see the width of the picture is 1920:720p, This is too large on the viewport and I need to scroll left and right to be able to see the rest of the image on the page.
I have tried pretty much everything I've seen in the comments so far, perhaps I tried incorrectly but nothing seemed to fix it, keep in mind my display is 19:10 and is the display used with the m1 macbook. Im not sure the exact resolution or if it matters but I can't for the life of me seem to make this image fit my page, I've tried using:
.(the picture) { width: 100% height: 100% }
And:
.(the picture) { width: 100vw; hight: 100vh; }
And:
.(the picture) { width: 100vmin; height: 100vmax width: 100vmax; height: 100vmin }
And pretty much every combination of those things you could think of and it stays the same resolution and does not ever fit the view port.
Another problem i'm facing is that when I make the window smaller it cuts all the elements that don't fit inside the smaller window.
Thats all I got for now, ill probably add more if I need to later.
Edit1: Keep in mind I did not use vhvw % and vminvmax with only the picture, I tried them with the body element and some other things too.
This is called "Responsiveness".
The tag
Start by adding this meta tag to your head tag:
<meta name="viewport" content="width=device-width, initial-scale=1.0">
vw and vh
as mentioned by #cloned,
use widht:100% and height:100% to set the size relative to the parent.
and use width:100vw and height:100vh.
vw is view-port, the size relative to the screen. 100vw means 100% of the size of the screen. So if the screen is 1920p in width, the element itself will appear 1920p. If you set it to 10vw, the element itself has a width of 192 pixels.
On a window with 30px width, 10vw is 3px.
Same is for vh but it's for the height.
These guys, vh and vw work completely individually and may create problems on windows with an aspect ratio other than 16:9.
For this we might wanna use v-min or v-max
You can read more on this here:
https://www.w3schools.com/cssref/css_units.asp
https://www.google.com/search?q=how+to+make+responsive+website+using+css
https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Responsive_Design
Extra information
I also use position:fixed when assigned tasks to make the website responsive like this:
.class {
position:fixed;
left:0px;
right:0px;
width:100vw;
height:100vh
}
this makes the entire element cover the page and have it completely centred. You can try zooming out, scrolling (although the scrollbar doesn't appear unless there's more) or resizing it to a completely different dimension. It will look as if it's covering the entire page perfectly.
I've been searching in other questions since this is a pretty common problem but none of them applied to my case.
I'm developing a small web app with React, just to get the basics, and the background img works fine in mobile view (there's a media query that changes it at 480px to a portrait one) it resizes from 480px to 320 and looks good.
The problem is that, at certain heights if you stretch or wide the window the background gets stucked in the middle of it (if you recharge the page it appears as it should, being the window in the same exact place as where the problem occurs).
The img is loaded through CSS in the html, If I remove the background-size property it works as expected in desktop and mobile, but when I cross the 1260px width it doesnt cover the full width.
I have this codesandbox with all my code: https://codesandbox.io/s/stoic-brahmagupta-ro2kb?file=/src/style.css
And I attach an image of the problem. Thanks in advance.
As u r testing this you can see the content of the App is overflowing the html element
I rather use min-height on global elements like body or html than static height to prevent such as cases.
So to fix it you just simply add
html {
height: auto;
min-height: 100vh;
To prevent not overflowing instead of scaling we just add min-height equaly of 100vh (viewport height).
I think it will propably do the job without height: auto; but i like add it to prevent even more edge casing
I'm trying to build a site with an initial 'landing page' look that you'd then scroll down from to see the rest of the content.
I can easily create a div that will fit the screen on the device I'm currently using, but how can I code for other devices of different screen sizes?
I've tried using '100%' which of course works initially but then continues to fill the screen when you scroll. I've tried defining a specific aspect ratio but again, that will only work for the screen I'm working on.
To be clear, I want the div, or img to fill the screen when a user first lands, then when the user scrolls the div/img should move up with the rest of the page.
I want to achieve this using only HTML or CSS.
Thanks in advance for any tips!
You can use vw and vh on the first <div> to fill the viewport. You can use this for reference: https://developer.mozilla.org/en/docs/Web/CSS/length
This'll do the trick:
.full-page-container {
width: 100vw;
height: 100vh;
}
vw and vh units represent a percentage of the viewport size. Hence 100vh will mean 100% of the viewport height and won't be affected by scrolling.
Browsers like IE under Tools, Options, Advanced, have a checkbox for "enable automatic image resizing". Is it correct to say that this feature has nothing to do with the HTML and/or JavaScript on the page itself, and is functionality that the HTML and/or JavaScript on the page itself cannot command?
I ask because I cannot find a way to convince HTML IMG to behave in a manner that resizes by window size which of course can vary with the platform. One can set HTML IMG pixel height and/or pixel width, but that is without respect to the window size. And one can set HTML IMG percent height and/or percent width, but that is with respect to the original image size, not the window size.
I've seen suggestions to box the HTML IMG with a HTML DIV that sets height and/or width limits, but HTML IMG appears to blow out those limits. Ditto HTML HTML and/or HTML BODY limits. In all cases, HTML IMG appears to have a mind of its own, and will limit itself, especially vertically, solely with respect to the image itself, not any HTML container.
How to train HTML IMG to function as per container and/or window size? Would be grateful for actual examples not just suggestions. Thanks.
img { width:100%; height: auto; } will flex your image to the size of your container, be it your image container or document. Setting max-width and min-width will constraint the image to the sizes you want.
Here is a demo
http://jsfiddle.net/T6PvL/
Just push the result window so you can see how the image flexes. If you want to set a size constraint simply state img { max-width:300px /*or any other size you like */ and the image will only go as far as you tell it to.
You'll be needing to subscribe to the resize event of the window. Here is a code snippet. Each time the window resizes it is triggered. This script just sets the new dimensions into the spans
<script type="text/javascript">
//<![CDATA[
$(function () {
$(window).resize(function (e, e1) {
$("#wWidth").text($(window).width());
$("#wHeight").text($(window).height());
});
});
//]]>
</script>
<span id="wWidth"></span>
<span id="wHeight"></span>
Edit:
Check out the live demo here
Edit:
Resize the window in order to see the example at work.
I have an image that, depending on the screen resolution, drops down out of sight in my CSS flow layout because I have set its width and height to static values.
Is there a way in a CSS flow layout to have the image automatically resize while someone is making the browser window smaller. I have seen this done in a html-table layout and I assume the tables make it possible there - is there a way to also do this in a CSS flow layout?
A quick test shows that this:
<img class="test" src="testimage.jpg" />
combined with:
img.test { width: 50%; }
Resizes the way you probably want. The image dutifully resized to 50% the width of the box containing it, as well as resizing vertically, maintaining the aspect ratio.
As for resizing based on vertical changes, it doesn't work the way you would like, at least not consistently. I tried:
img.test { height: 50%; }
In current Google Chrome (2.0.172), it resizes somewhat inconsitently; the sizing is correct but does not update after every window drag. In current Firefox (3.5), the height seems to be ignored completely. I don't have any remotely recent IE, Safari, etc to test. Feel free to edit in those results. Even if those do well its still probably something you want to avoid, and stick with width.
EDIT:
For this to work, all the elements containing img.test need to be sized with percentages, not statically.
Think of it this way:
body is 100% of window size.
img is 50% of body.
img is 50% of window size.
Now suppose I add a div. like this...
<div class="imgbox" style="width: 100px;">
<img class="test" src="testimage.jpg" />
</div>
Then
body is 100% of window size.
div is 100px, ignoring body width.
img is 50% of div.
img is 50px, regardless of window size.
If the div has "width: 100%" though, then the logic works out the same as before. As long as its some percentage, and not fixed, you can play with the percentage on the img and make it work out the size you want.
bit of a guess since my css is rubbish, but since nobody is answering, what about setting a % width or height or both in the image so that it is a percent of its parent. dunno?
Try setting max-width to something like 95%. Thank way the image will shrink when the container width is less then the width of the image. All of the parent containers would need to adju
max-width:95%;