Question

我无法获得工作的响应能力......

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

我试图让他们两个都做出回应......没有任何进展。

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

这是jsfiddle所以你们可以看到。

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％ - 为了保持图像宽高比，我们包括高度：auto。如果这无关紧要，请随意省略。

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

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

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

1 个答案: