1

我正在尝试编写我的第一个 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，而不会显示任何溢出或背景。理想情况下，我也希望它居中，但这可能需要等待......！

谢谢

4

0 回答 0