anarch — 2011-06-26T06:33:26-04:00 — #1
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.
system — 2011-06-27T01:14:02-04:00 — #2
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...
anarch — 2011-06-27T02:11:59-04:00 — #3
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
system — 2011-06-27T12:05:13-04:00 — #4
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?
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)
Can't say I've ever heard that; that would make almost every content first columnar layout invalid... Where are you hearing/seeing that?