How to keep an image entirely within a div and still allow it to snap up a row in a fluid grid layout?

Question

My images keep overlapping the borders of my div boxes. I have found that float:none causes the image to be constrained within the div nicely but then the divs will no longer sit side by side. If I set back to float:left they snap up fine. Has anybody got another method to get the image to stay entirely within the div that doesn't involve float ?

Answer 1

try:

img {
   max-width: 100%;
}

Answer 2

Try this:

HMTL:

<div>
<img src="something.jpg" alt="" />
</div>

CSS:

div{
 width: 100px;
 height: 100px;
}

div img {
 width: 100%;
}