Clipping thumbnail images for responsive layout

HTML & CSS
1

I’m having some trouble with styling thumbnail images in snippets on a blog front page. The snippets are in two percentage-width columns in a responsive layout, so I’d like these images to be able to shrink a little bit when necessary.

The client will upload each image with each new article and the CMS adds width/height attributes, so I’m using the clip property, but it’s not the perfect answer, even with new values for every breakpoint. I expected it to behave muchlike overflow:hidden, but any hidden part of the image that creeps outside of the viewport triggers side scroll.

Is there any fix for this? I’ve been running alternatives through my mind, but clip seems like the least impractical option.

2

If you’re using <img> tags and not background-images then there’s two options.
The clip property only works for background-images.

If you want the images to scale, set the img width: 100% and add a wrapper with the desired width.
If you want to crop the images use overflow: hidden on a parent.

3

Are you sure that clip only works for backgrounds? That’s background-clip. When I looked up how to use clip, images were used in the examples and it works up to a point.

100% width won’t work here, because of the attributes that I already mentioned. That’s what I would normally go for, but I can’t remove the attributes in this case. Nor can I add a wrapper, for the same reason. That’s the other option that I would normally do if I had control over the mark-up.

4

Are you sure that clip only works for backgrounds? That’s background-clip. When I looked up how to use clip, images were used in the examples and it works up to a point.

Oh right, my bad. http://reference.sitepoint.com/css/clip
I don’t think clip will work for images, because the height & width have special meaning and resize the image itself.
A width in the css will override height/width attributes on the images.

My suggestions are still valid.


<div><img src="jpg.jpg" height="50" width="50"></div>

If you want the images to scale, set the img width: 100% and add a wrapper with the desired width.


div { width: 20% /* or something else */ }
img { width: 100% }

If you want to crop the images use overflow: hidden on a parent.


div { overflow:hidden }
img { /* let width attribute set this or set a fixed width for all */ }

Edit: Just read this.

Nor can I add a wrapper, for the same reason. That’s the other option that I would normally do if I had control over the mark-up.

Coding like this is like fighting without legs or arms.
We need to see the HTML.

5

A width in the css will override height/width attributes on the images.

Well, yes and no. Insomuch as width overrides width, and likewise for height, but I need to keep the height while reducing the width. And, unless I’ve not gone about it in the optimum way (I didn’t expend much time on this option, so it’s possible) it just created horrible distortion. It would be an option for scaling in and x and y, certainly.

Coding like this is like fighting without legs or arms.

Tell me about it. I’m in at the deep end trying to override a lot of difficult HTML. I’m going to keep looking for a theme override way of adding a parent div or stripping the attribs, either of which would kick this into the ‘completed’ pile.

Thanks anyway, bud.

6

The trick is to only set one dimension and leave the other one auto.


img { height: 60px; width: auto }
7

Ah, that would be why, then. I had to fix both dimensions in this instance, so that would be a no-go.

Thanks again.

8

Is the image floated? Could you just set a %width on the image itself, so that it scales with the width of the content? (Admittedly, no all browsers scale images nicely, but the better ones do.)