下载后图像无法正确调整大小;他们保持在10x10px

Question

我的CSS有一个奇怪的情况，发生在所有浏览器中：

有时，当出现新图像时，它会使用我在CSS中指定的最小宽度/最小高度尺寸进行显示。如果我只是调整浏览器的大小（拖动角落），问题就会消失，图像会以完整正确的分辨率正确显示。事实上，这甚至不会每次都发生。当第一次看到图像时，它只发生在大约5-10％的时间。例如，如果我清除浏览器上的缓存然后重新加载，则问题会变得更加普遍。

这是Chrome元素面板的图片，显示正在应用最小宽度/高度（10px）而不是“自然”分辨率：

这就是屏幕上的实际情况：

图像的边框正在通过我的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);
}

我使用了元素面板来检查所有样式。元素面板显示10x10px的“计算”大小，但所有“样式”都与我的CSS（上图）正确匹配，没有任何迹象表明它将使用最小宽度/高度而不是（正确）图像宽度/高度

同样，最奇怪的是，这只是通过在浏览器上拖动一个角落或重新加载页面来修复自己。似乎在缓存的图像和应用的CSS之间存在某种竞争条件，因为它只发生在大约5-10％的时间，但它确实发生在所有浏览器上。