响应式 div 和图像，其中图像具有不同的大小

Question

我无法让工作响应能力...

我有几个 div，每个 div 的大小为 500pxx500px，并且 div 内的图像具有不同的大小。

我正试图让他们都做出响应......没有任何进展。

我已经让它的分辨率高达（最大宽度）320px。

这是 jsfiddle，你们可以看看。

http://jsfiddle.net/42b15toa/

HTML

<div id="container">
    <div>
        <img src="http://farm8.staticflickr.com/7307/16418106076_c4fbbe9ef7_b.jpg" class="size-1" />
    </div>
    <div>
        <img src="http://farm8.staticflickr.com/7307/16418106076_c4fbbe9ef7_b.jpg" class="size-2" />
    </div>
    <div>
        <img src="http://farm8.staticflickr.com/7307/16418106076_c4fbbe9ef7_b.jpg" class="size-3" />
    </div>
    <div>
        <img src="http://farm8.staticflickr.com/7307/16418106076_c4fbbe9ef7_b.jpg" class="size-4" />
    </div>
    <div>
        <img src="http://farm8.staticflickr.com/7307/16418106076_c4fbbe9ef7_b.jpg" class="size-5" />
    </div>
    <div>
        <img src="http://farm8.staticflickr.com/7307/16418106076_c4fbbe9ef7_b.jpg" class="size-6" />
    </div>
</div>

CSS

#container {
    padding: 0 10px;
}

    #container div {
        width: 500px;
        height: 500px;
        background: rgba(81, 81, 81, 0.3);
        float: left;
        margin: 10px;
        text-align: center;
        position: relative;
    }

        #container div img {
            position: absolute;
            margin: auto;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
        }

        #container div span {
            display: none;
        }

.size-1 {
    height: 400px;
    width: 300px;
}

.size-2,
.size-6 {
    height: 300px;
    width: 500px;
}

.size-3 {
    height: 300px;
    width: 400px;
}

.size-4 {
    height: 500px;
    width: 500px;
}

.size-5 {
    height: 500px;
    width: 300px;
}

@media screen and (max-width: 320px) {
    #tags {
        width: 250px;
    }

    #divProcessing {
        width: 80%;
        font-size: 15px;
    }

    #container div {
        height: 350px;
        width: 280px;
    }

    .size-1,
    .size-2,
    .size-3,
    .size-4,
    .size-5,
    .size-6 {
        height: 350px;
        width: 280px;
    }
}

Answer 1

我会尝试：

   #container div img {
        position: absolute;
        margin: auto;
        top: 0;
        left: 0;
        right: 0;
        width: 100%;
        max-width: 100%;
        height: auto;
        bottom: 0;
    }

诀窍是最大宽度：100% 和宽度：100% - 为了保持图像纵横比，我们包括高度：自动。如果这无关紧要，请随意省略。

结果：http://jsfiddle.net/ee7ddpoe/

一篇可能有用的文章：http://alistapart.com/article/responsive-images-in-practice 或者使用不同术语的旧文章：fluid-images - http://alistapart.com/article/fluid-images