Jump to content

Resizing Summary Block thumbnails?

Recommended Posts

alt text

My code is:


.summary-item {
 float: left !important;
 padding: 5px;
 height: 200px;
 width: 200px;
}

.summary-thumbnail {
 image-size: intrinsic !important;
}

My problem is that the container is 200 × 200, my image, however is not resizing properly to fit the content inside the container. How do I change the code so that the image fits the container and still maintains its aspect ratio without getting cropped?

I have also set the height and width to content-fit and it doesn't work either. Any suggestions? It would be greatly appreciated.

Link to comment
  • Replies 6
  • Views 15.5k
  • Created
  • Last Reply

Hi @anjeline - you can simplify that code a bit more.

When you have more than one CSS selector (here it's .summary-thumbnail and .summary-thumbnail img) using the same rules, simply list them, separated by commas, and then add the rules last of all:


.summary-thumbnail,
.summary-thumbnail img {
  width: auto !important; height: 200px !important;
}

Although before doing that, I'd suggest you check that you need both, try sizing just the image, it should force the containing div to resize as you want it to.

The name is an Anglicised form of the Greek Korvetti — I like to think there’s a little bit of the ancient Hellenic drive in me.

Link to comment
  • 2 months later...

Even if I don't add any code to the summary block, or I try the code written by Neeklamy, the 3 summary/blog images don't re-size when I move the browser window and see the responsiveness. The "Cafe" text image to the left does re-size though, so what's going on here?

Site is at twenty20cafe.com

Link to comment

Just to be a bit clearer on this, what are you wanting those blog excerpt images ("Photo Album from Friday's…" and "Thanks Bluffton Today…") to do at smaller sizes?

The name is an Anglicised form of the Greek Korvetti — I like to think there’s a little bit of the ancient Hellenic drive in me.

Link to comment

I'm trying to do a different, but similar thing. I want the size of the image to be based on the size of the container and responsive (resize with browser). I'm 90% there with this CSS.


.summary-block .summary-thumbnail {
 overflow: hidden;
 height: auto;
}

.summary-block .summary-thumbnail img{
 position: absolute;
 top: 0;
 left: 0;
 width: 100%;
}

This has served to make the container and the image responsive and the image fits the container, but on loading, it looks funny. Once I resize the window, the image goest to the correct size and scales. But when it loads, it's cropped and wrong. I can't figure it out. Maybe it will help some, and some can help me make the images load correctly.

On an iphone it loads right, on the iPad and desktop browsers, it loads the image cropped.

Link to comment
  • 1 month later...

Hey all,

I used a variation above code to do the following:

Display a summary block with thumbnail image only, at original excerpt thumbnail image dimensions, without cropping the image, keeping it responsive:

.summary-block .summary-thumbnail {
overflow: hidden !important;
height: auto !important;
width: auto !important;
}

.summary-block .summary-thumbnail img {
position: absolute;
top: 0 !important;
left: 0 !important;
width: 100% !important;
height: 100% !important;
}

Link to comment

Archived

This topic is now archived and is closed to further replies.

Guest
This topic is now closed to further replies.
×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.