Question

我正在尝试编写我的第一个RWD网站，我希望我的投资组合的图像网格可以按比例缩放，但也会按比例显示图像并在每种情况下填充其父div。

这是我的HTML：

<html>
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="pixooma_boilerplate.css">
<title>Untitled Document</title>
</head>

<body>
<div id="wrapper">
<div class="latest"><img src="gilhooley.jpg">
</div>
<div class="others portrait"><img src="points_kit_cover.jpg">
</div>
<div class="others landscape"><img src="finland_dps2.jpg">
</div>
<div class="others landscape"><img src="CS-logo-chosen.jpg">
</div>
<div class="others landscape"><img src="olympic.jpg.jpg">
</div>
</div>
</body>
</html>

这是我的CSS（不包括HTML5样板样式）：

body {
    background:#39C;
}

#wrapper {
    background:#993;
    width:90%;
    max-width:1200px;
    margin:0 auto;
}

img {
    max-width:100%;
}



.latest {
    width:50%;
    max-width:800px;
    max-height:600px;
    background-color:#669;
    float:left;
}

.others {
    width:25%;
    max-width:300px;
    max-height:300px;
    background-color:#0C3;
    float:left;
    overflow:hidden;
}


@media screen and (max-width:800px) {

    .latest {
        width:100%;
    }

    .others {
        width:25%;
    }

}


@media screen and (max-width:600px) {

    .latest {
        width:100%;
    }

    .others {
        width:50%;
    }

}

@media screen and (max-width:320px) {

    .latest {
        width:100%;
    }

    .others {
        width:100%;
    }

}

我希望网站能够上传任意大小的图片并按比例填充div，而不会显示任何溢出或背景。理想情况下，我希望它也能集中在一起，但可能需要等待......！

三江源

按比例填写响应div

0 个答案: