不包含图片/ img /溢出的圆角：隐藏；

Question

http://jsfiddle.net/sheriffderek/4JkkF/1/ ///new version of fiddle///

please check out this jsfiddle.

I'm having trouble keeping my images within the borders of their respective divs with rounded corners. This was really simple until I was asked to put border-radius on everything... any help would be much appreciated...

a further explanation of situation...

in a CSM for each "post" i fill fields...

one gets called with php as a title, one as a thumbnail, one as a description, AND - one as the image that goes into the slider. (a list of img's) <img src="" alt="">'s etc...

the whole layout is liquid - and so i need the image to stay behind a "frame" like div... just like in a background-image in css... and change size without messing up the rounded corners... I can do it with styling the img but i just thought for some reason - that the div within which the img lives would dictate the outer edge... but - so far i am wrong...

Answer 1

When you specify a border-radius , then the content gets "wrapped" inside the borders -- so the image inside your div gets pushed by the corners, not clipped. You can achieve the desired behavior by using the image as a background to the div instead.

A little working demo: little link .

I hope that helped in any manner!

Answer 2

but i don't understand why the img is coming out the div in the first place...

The image itself in the 1st case is bigger than the surrounding div. But the surrounding div has an overflow:hidden plus width & height.

So the surround div.thumbnail wont scale up ..

My suggestion would be:

    <div class="thumbnail" style="height:50%;width:50%;position:static">
    <img src="http://derekthomaswood.com/place/blink3.gif" alt="" style="position:static; display: block;width:100%;height:100%">
</div>
<!-- of course adjusting the classes, not as inline css ;-) 
  resizing works over adjusting the div.thumbnails dimensions
-->

HTH Gekkstah