Full Sized Image That Resizes Based On Browser Window…

[Historical Forums User]

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:
http://jeffsingerphotography.com/portfolios/one/2014/1/7/giuliettacarrelli-2

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?

Thanks!

[Paulie_D]

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?

https://css-tricks.com/perfect-full-page-background-image/

[Historical Forums User]

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:
http://jeffsingerphotography.com

Thanks!

[Atelierbram]

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.

[Historical Forums User]

Atelierbram,

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?

[Atelierbram]

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?

@1957Goldtop

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.

[Historical Forums User]

Atelierbram,

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”:
http://help.squarespace.com/guides/about-the-code-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.

Thanks!

[Atelierbram]

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>
</figure>

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>
</figure>

[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.

[Author]

Posts