Resizing Summary Block thumbnails?

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.

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

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.

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

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?

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.

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