Images not properly resizing after being downloaded; they stay at 10x10px - html

Question

I have an odd scenario with my CSS, happening in all browsers:
Sometimes, when a new image appears, it displays using the min-width/min-height size specified in my CSS. If I merely resize the browser (drag a corner) the problem goes away and the image properly shows up at the full, correct resolution. In fact, this does not even happen every time. It only happens about 5-10% of the time, when an image is first seen. Eg, if I clear the cache on my browser and then reload, the problem becomes more prevalent.
Here's a picture of the Chrome elements panel, which shows that the min width/height (10px) is being applied instead of the "natural" resolution:
And here's what it actually looks like on the screen:
The border of the image is being applied via my CSS...
.streamifiedPostImageContainer {
margin-top: 5px;
overflow: hidden;
width: 100%;
}
.streamifiedPostImage {
float: left;
margin-right: 8px;
max-width: 100%;
}
.streamifiedPostImage img {
border: 3px solid #FFF;
max-width: 100%;
max-height: 100%;
min-width: 10px;
min-height: 10px;
box-shadow: 0px 1px 8px 1px rgba(0, 0, 0, .3);
}
I've used the elements panel to inspect all the styles. The elements panel shows the "computed" size at 10x10px, yet all of the "Styles" properly match my CSS (above), with no indication why it would be using the min width/height instead of the (proper) image width/height.
Again, the strangest thing is that this fixes itself by merely dragging a corner on the browser or reloading the page. It seems that there is some sort of race condition between the image being cached and the CSS being applied, because it only happens about 5-10% of the time, but it DOES happen on all browsers.