SitePoint Sponsor

User Tag List

Results 1 to 4 of 4

Hybrid View

  1. #1
    SitePoint Enthusiast
    Join Date
    Jun 2011
    Posts
    52
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Image Manipulation

    Hey guys, another quick and hopefully easy question. I need to crop the top and bottom of a youtube thumbnail to remove the black bars. Normally I would do this with CSS but the clip function requires the position to be absolute whereas my formatting requires it to be relative.

    Is there an easy way to do this? I'd rather not have to include another script but if it's small enough I suppose I could. I've already got an old version of jquery included.

    It's not a big deal but also if there's a way to create a resized image (rather than the typical html shrinking) that would be cool too.

  2. #2
    Non-Member bronze trophy
    Join Date
    Nov 2009
    Location
    Keene, NH
    Posts
    3,760
    Mentioned
    23 Post(s)
    Tagged
    0 Thread(s)
    I'd still do it in your CSS - just wrap it in a div, position:relative the div, set it to overflow:hidden, then apo the image inside that div. Hell, you might not even need to apo it; just put a negative top margin to chop the top and let the fixed height of the div with the overflow:hidden chop the bottom.

    That or set it as a background-image, then you can even use an inline-block element to do it if block-level isn't suitable to the task.

    NOT something I'd even be looking at .js to handle... of course I don't consider CSS "clip" to be real world deployable yet either so...

  3. #3
    SitePoint Enthusiast
    Join Date
    Jun 2011
    Posts
    52
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    hmm the problem with that is that my script builds a giant array and each's through it to create long and complex html pushes with very particular div's associated for certain functions etc

    yikes looks like that is going to be the best way to do it... do you think i'll have issues between browsers?

    blah w3 says margins can't be negative

  4. #4
    Non-Member bronze trophy
    Join Date
    Nov 2009
    Location
    Keene, NH
    Posts
    3,760
    Mentioned
    23 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by anarch View Post
    hmm the problem with that is that my script builds a giant array and each's through it to create long and complex html pushes with very particular div's associated for certain functions etc
    Well, that's where classes come in, or you could use span instead and use CSS to make it behave how you want... though that sounds like you may be overcomplicating your output. Do you have a working example we could look at? Maybe we can help you simplify it down?

    Quote Originally Posted by anarch View Post
    yikes looks like that is going to be the best way to do it... do you think i'll have issues between browsers?
    It should work everywhere -- it's how I build complex menu sprites with hovered images. Since the relative outer container would have haslayout when you state it's height, it haslayout so IE's not a problem, and it's always worked RoW. (rest of world)

    Quote Originally Posted by anarch View Post
    blah w3 says margins can't be negative
    Can't say I've ever heard that; that would make almost every content first columnar layout invalid... Where are you hearing/seeing that?


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
  •