How do I stretch images to occupy the whole browser window

Hi,

I want to stretch an image such that the image occupies the entire width of the browser window. That is, the image will appear full width, no matter what the screen or browser size. (This is NOT a background for the web page).

1. Therefore as the browser window is resized, the complete image must remain within the borders of the browser.

2. No fixed min or max dimension is expected.

3. To prevent distortion the aspect ratio must not change (the height must scale proportionate to the width).

4. As the image forms part of the web page, it must move up and down. Space will be provided above and below to accommodate the thinning and thickening of the object

In the below link, there are 2 images. The top image acts as desired, except that it is not moving as the page scrolls. The second image moves with scrolling but isn't resizing. It is all done with CSS.

I believe spinner pro has an in-built resizing feature, but I don't have pro. I'd prefer not to use CSS for every major banner image, but the code used can be viewed at;

http://www.otkrit1.com/resize_image.html

The .IMS file is also downloadable from there

Any suggestions welcome.

Original Post

Note: Your server does not support downloading the project .IMS file. You will need to set up a MIME type for it, or maybe zip it before it can be downloaded.

Both SS and SS-Pro have a resizing tools - Relative Horizontal Sizing and Relative Vertical Sizing. It is part of the Arrange toolbar. If you cannot see these tool buttons, right-click on a toolbar to open the Toolbar Options window, go to the Arrange menu and add the tools. However, these tools will not do what you want. While they will allow the image to fit the page, it stretches the image rather than maintaining the aspect ratio.

You should be able to get the effect you want by adding the image to your page, positioning the top to where you want it on the page, then adding some CSS to override the default CSS code. In a CSS code object, use:

#Oobj1 {
  left: 0;
  right: 0;
  width: 100%;
  height: 100%; /* or auto */
}
#Oobj1 img {
  object-fit: cover;
}

Replace obj1 with the object name of your image.

thanks larryd. I put the .IMS into a zip.

This CSS allows me to have full visibility over the positioning of the image and it does indeed resize as desired;

1. http://www.otkrit1.com/shrink.html), provided;

- the page is not centered (seems to overide the CSS otherwise)

- 'height' in the CSS is set to 'auto' to allow it to scale in proportion and otherwise prevent distortion and

- you use explorer.

However seems to go haywire in chrome and doesn't work if page has centering as per;

2. http://www.otkrit1.com/center_horizontal.html

I also found (as you described) the "relative horizontal sizing" feature in sitespinner. However I understand it doesn't work with page centering on. Also it only is good for forcing the image to span the [width of the] web page - not the browser page.

If I use page centering (as explained in link 2 above), my web page will be centered in the middle of the browser window, but the provided CSS won't facilitate header banners (image) spanning the browser window width.

I do not understand why you do not what this as a background rather than filling a <div> block. You get the same effect with much less code overhead. After you have added the image as a page background (with the Image button), add the following CSS to make it file the following code:

body {
  background-size: contain;
}

 

Add Reply

Likes (0)
×
×
×
×