Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
Advanced Search
  • 0
Sign in to follow this  
anjeline

Resizing Summary Block thumbnails?

Question

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.

Edited by anjeline

Share this post


Link to post

6 answers to this question

Recommended Posts

  • 0

I figured it out if anyone is interested.


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

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

Edited by anjeline

Share this post


Link to post
  • 0

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.

Edited by neeklamy

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.

Share this post


Link to post
  • 0

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

Share this post


Link to post
  • 0

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.

Share this post


Link to post
  • 0

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.

Share this post


Link to post
  • 2

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;
}

Edited by atw

Share this post


Link to post
Guest
This topic is now closed to further replies.
Sign in to follow this  

×
×
  • Create New...