SitePoint Sponsor

User Tag List

Results 1 to 8 of 8
  1. #1
    SitePoint Zealot
    Join Date
    Sep 2009
    Posts
    118
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Clipping thumbnail images for responsive layout

    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. #2
    padawan silver trophybronze trophy markbrown4's Avatar
    Join Date
    Jul 2006
    Location
    Victoria, Australia
    Posts
    4,118
    Mentioned
    28 Post(s)
    Tagged
    2 Thread(s)
    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. #3
    SitePoint Zealot
    Join Date
    Sep 2009
    Posts
    118
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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. #4
    padawan silver trophybronze trophy markbrown4's Avatar
    Join Date
    Jul 2006
    Location
    Victoria, Australia
    Posts
    4,118
    Mentioned
    28 Post(s)
    Tagged
    2 Thread(s)
    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.
    Code html5:
    <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.
    Code css:
    div { width: 20% /* or something else */ }
    img { width: 100% }
    If you want to crop the images use overflow: hidden on a parent.
    Code css:
    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. #5
    SitePoint Zealot
    Join Date
    Sep 2009
    Posts
    118
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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. #6
    padawan silver trophybronze trophy markbrown4's Avatar
    Join Date
    Jul 2006
    Location
    Victoria, Australia
    Posts
    4,118
    Mentioned
    28 Post(s)
    Tagged
    2 Thread(s)
    Quote Originally Posted by Mat30 View Post
    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.
    The trick is to only set one dimension and leave the other one auto.

    Code css:
    img { height: 60px; width: auto }

  7. #7
    SitePoint Zealot
    Join Date
    Sep 2009
    Posts
    118
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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. #8
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,331
    Mentioned
    463 Post(s)
    Tagged
    8 Thread(s)
    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.)


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •