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

Question

我的反应能力很差……

我有几个div，每个div的大小都是500pxx500px，而div中的图像有不同的大小。

我正在尝试让他们两个都是responsive...without任何进展。

我已经使它的分辨率高达(最大宽度) 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% -为了保持图像的纵横比，我们包括了height: auto。如果这无关紧要，请随意省略它。

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

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