I'm looking for a way to resize the whole window of my webpage to fit the window size.
So, kind of this (look at the background image). But for the whole page?
And I'm not talking about keeping the font the same size, or the images. I'm really talking about resizing everything in the screen. So even the images would resize.
Related
When resizing the browser, I want the content to be fixed in their position. When resizing the website to a smaller size, I want the content to be cutoff when it doesn't fit. This is similar behavior to Google's webpage.
(https://i.stack.imgur.com/CHDJx.png)
https://github.com/calvintuantran/DrYipWebsite (Code)
I tried making the entire page position absolute but it does not work
I have an idea for a layout. When users first load a page. The content will be display full window height. But when users resize the window, it will add a vertical scroll bar to view the full window height.
To put into another, it is like I want to keep the full height window when users resize the window.
Example, initially the window full height is 1600px, and then when users use a mouse to resize the window to 1000px for example, I want the content still 1600px and a scroll bar is added to help users view the content.
And if users open the window initially at let's say the smaller screen 800px height. I want it first make full height but then when users resize the content will fit the resize window.
Am I confused about my idea but is it possible to do so?
If you mean zoom when you say resize and mouse. You can use
window.resize = function() {
//will be called whenever the window changes size. I.E zooming in or changing the window size manually
}
To pick up that behaviour, but the best approach I believe would be the place the content you wish to have this property into a div wrapper. As that way you can set the size manually.
Hope that helps
Let's do it by steps:
are you using any framework ?, Frameworks generally use the window's resizing base, the percentage of the window used, so it will adapt whenever the user decreases or enlarges the screen, if you want the static screen when resizing, change the css attributes of your framework, or create your layout with pixel or hexadecimal from scratch. To create an adaptive window on the first access and then leave it static, first you have to put your highest value DOM element (html, or window) in css, and the other elements you leave in pixel values, if you need , also use the "position: fixed" attribute.
As the title says, is it possible to position an image in the center of the screen rather than the center of the browser?
This means if your browser wasn't open full screen (lets assume the browser is only using 3/4 of your screen), the image would not appear in the middle of the browser window, but rather in the middle of your actual screen. This means the image might be positioned near the right edge of your browser window.
Thank you.
You can get the screen resolution and measure image position depending on this. Look to this
How to detect the screen resolution with JavaScript?
You cannot position anything outside of the viewport unless you open a new window. If your question is referring strictly to an image element only. The answer is No. Anything positioned outside of the browser viewport will cause horizontal scrolling inside the viewport.
On desktop, you can however open a popup window in the middle of the screen the size of your image, with your image in it.
So the window I am opening, does so as below:
test
The page opens a login page which requires a minimum width of 800 and height of 600 in order to see all the content.
However once they have logged in, it then takes them to a information page, but the aspect ratio needs to stay the same as the original window that it was opened in (600,640).
Is there a way I can get javascript to resize the window, but keep the original aspect ratio, as long as its bigger than 800x600, if not resize to a ratio just over that dimension? (I dont want to specify the original launch size, as i want to use this code globally across this type of popup on the site).
Thanks.
This is usually something you fix with a proper template/stylesheet.
Can you change the template so that it allows any aspect ratio?
Use margin: auto to center divs horizontally.
This should take away all window-size requirements.
im using a image preview that allows me to add css styles to the previews that pops up.
now, some images are larger than the screen so you will just see a portion of them, while other images are very small so you don't have to resize them.
is there a way to only resize the larger images and not touching the smaller ones, eg. only resize images with width or height larger than 400 px?
any other approaches to make the larger ones fit into the screen without affecting the smaller ones would be appreciated cause if i just use width=400px and height=400px all images will be at that size and the proportion will be wrong. and for smaller images you will se very large pixels.
thanks in advance
Seam carving javascript implementation is what I call smart resizing of images :)
Anyway, in Javascript, you can implement your logic depending on the width and height properties of the Image object.
Also have a look at this page, the author uses jQuery to resize images larger than specified dimensions.