The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS Full Sized Image That Resizes Based On Browser Window…

  • This topic is empty.
Viewing 9 posts - 1 through 9 (of 9 total)
  • Author
  • #165935

    I have a Squarespace website where I can create a page that I can place a “code block” in it so the code will fit within the template. I’m not sure if this is an HTML or CSS thing than needs to be done.

    What I would like to do is create a page (it will be my landing page) that displays one image that “fits” within the full screen of the template. An example would be like this:

    I would just do that for the page I’m creating but that image is in a particular type of page in Squarespace; a “gallery” and the page I want can’t be a “gallery”

    So, I would like the code to make the image centered, “full screen” (within the template’s “window”) and will automatically resize itself when the browser window is resized.

    How would I be able to do that?



    By “full screen” do you mean the size of the screen or with a specific block on the page…it’s not clear from your example?


    I guess full screen isn’t a correct description… On the link I provided, the image is taking up the entire right “frame” (the part of the page that isn’t the sidebar). It’s leaving a little white space around the edges of the image and depending on the aspect ratio of the image and browser will leave more white space where it needs to.

    I would like to do that.

    If you got to my home page now I have an image up that doesn’t scale larger when the browser window is larger than the image (it does scale down though)… Basically I want it to scale up and down as needed:



    I’m wondering how all those nested divs with inline CSS ends up in the markup
    Besides that, there already seems to be some kind of responsive images javascript going on. Noticed this data-src=" custom attribute, which is turned into a normal src attribute when rendered.

    Wow, check this out, someone please explain the following:

    First when opening the image with ?format=500w at the end of the url, and then changing that 5oo value to 3000 (press enter). Have to admit that I don’t understand how the rescaling happens. Has got to be some server side scripting by the Squarespace platform, can’t see any javascript there.

    @1957Goldtop , I’m not really answering your question here, and probably can’t: there might be too many unknown unknowables from just looking at it in the browser. Maybe try your luck at the Squarespace forums with this one.



    Unfortunately I don’t really understand most (all) of what you said… as for the 500w and 3000w scaling… is that a good thing or a bad thing?

    So, I can add “custom html” to the page; how would you do this if you were just create a blank html document that had nothing to do with Squarespace? Couldn’t I then just put that code in the “custom html block” and make it work?


    Unfortunately I don’t really understand most (all) of what you said… as for the 500w and 3000w scaling… is that a good thing or a bad thing?


    What I tried, and probably explained poorly, was as an experiment:

    • open the url of the image in the browser which has this ‘query string’ at the end of it ?format=500w
    • you see an image of 500px width
    • now change that 500 value to 3000
    • leave the cursor in the browsers url box after the url and hit enter on your keyboard
    • now you see this giant 3000px wide image (which looks great btw)

    My conclusion is, since we are looking at a plain static image with no javascript in sight, that this query string is somehow connected to some server-side image-rescaling-scripting (PHP, Ruby, ….).
    I find this intriguing, and I bet developers at Squarespace thought hard about this solution, that comes with the CMS, but it also might be a one-size-fits-all solution.
    So in this case, yes, if you could opt-out of this ‘image-block’ treatment by creating some custom HTML, I say go for it, what do you have to lose?

    Disclaimer: I haven’t tried Squarespace myself, and you should probably try to also get some advice by people who are experienced with it.



    I don’t need to use the image block… that is what I’m currently using since I didn’t know how to code it as html using an “html block”. I can remove the image block completely and then put in an “html block”:

    Within that, I can put in custom html code…but I don’t know what that code should be… I was hoping someone here might be able to suggest something.



    Most important thing is to not put width and height attributes on the image, and in the css ( the link you provided has information on that also ) have this image declaration: .full-width img { max-width: 100%; }

    In HTML it would be neat to nest the image in a figure element, something like this

    <figure class="full-width">
      <img src="path-to-image/image.jpg" alt="alt text image">
     <figcaption>A caption for this image.</figcaption>

    In the CSS something like:

    .full-width {margin: 0 auto;}
    .full-width img { max-width: 100%; }
    figcaption { text-align: center; color: #666; }

    You could put the CSS also inline in the HTML, … disclaimer: I do not recommend this:

    <figure style="margin: 0 auto;">
      <img src="path-to-image/image.jpg" alt="image" style="max-width: 100%;">
     <figcaption style="text-align: center; color: #666;">A caption for this image.</figcaption>
    Chris Coyier

    I don’t mean to be rude but you guys are way over complicating the solution. The problem is on the page there is a <div id="canvasWrapper"> immediately after the opening <body> tag. There is CSS applied to #canvasWrapper that gives it a max-width:1200px; remove that and it works just fine. I just tested it in Firebug.

Viewing 9 posts - 1 through 9 (of 9 total)
  • The forum ‘CSS’ is closed to new topics and replies.