多个响应图像

Question

我在垂直和水平居中的div中有四个图像。我希望这些图像在屏幕尺寸允许的情况下与我的div相同。如果屏幕重新调整尺寸（或在智能手机上），我希望前两个在一条线上，另外两个在第二条线上。

在宽屏幕上行为应该是这样的：

在紧张的屏幕上变成这个：

我不知道如何得到这个......

我的HTML：

<div class="wrapper">
    <img src="img1.png" class="img-responsive" alt="man1">
    <img src="img2.png" class="img-responsive" alt="man2">
    <img src="img3.png" class="img-responsive" alt="man3">
    <img src="img4.png" class="img-responsive" alt="man4">
</div>

和css：

html, body {
    height: 100%;
    width: 100%;
    margin: 0;
    padding: 0;
}

.wrapper {
    margin: auto;
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    width: 80%;
    height: 80%;
    text-align: center;
}

.img-responsive {
    max-height: 100%;
    width: auto;
}

JSFiddle

Answer 1

您可以使用媒体查询轻松解决问题。看看：Media Queries for Standard Devices

当屏幕宽度小于400px时，您可以在半屏尺寸上定义图像。

html, body {
    height: 100%;
    width: 100%;
    margin: 0;
    padding: 0;
}

.wrapper {
    margin: auto;
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    width: 80%;
    height: 80%;
    text-align: center;
}

.img-responsive {
    max-height: 100%;
    width: auto;
}


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

.img-responsive{
 width: 33%;
}

}

@ JSFiddle

：）

Answer 2

我认为你可以做一些简单的事情：

@media only screen and (min-width: 768px) {
.wrapper img {position:relative; float:left; width:25%; height: auto}
}

@media only screen and (max-width: 767px) {
.wrapper img {position:relative; float:left; width:50%; height: auto}
}

第一部分说：当屏幕尺寸超过768px时，每张图像的宽度为包含div的25％，因此可以并排显示4幅图像。

第二部分说：当屏幕尺寸小于767px时，每个图像的宽度为包含div的50％，因此将并排显示2个图像。

根据您的偏好，断点显然会发生变化。我在没有.img响应类的情况下定位了您的图像，但如果您愿意，可以使用.img-responsive替换.wrapper img。

Answer 3

没有媒体查询的另一种可能的解决方案：

我添加了第二级包装器

fiddle

html, body {
    height: 100%;
    width: 100%;
    margin: 0;
    padding: 0;
}
.wrapper {
    margin: 50px auto;
        width: 80%;
    background-color: red;
    text-align: center;
}

.insideWrap {
    display:inline-block
}

.img-responsive {
    max-height: 100%;
    width: auto;
}