Question

我正在建立一个网站，下面是我想要的结果。

渴望： http://i.stack.imgur.com/JI7tQ.png 注意：左侧有一个图像，总共有5个图像。

然而，当我调整broswer的大小时，网格图像就像这样叠加在一起..

实际： http://i.stack.imgur.com/tNSLP.png

以下是我的代码

HTML代码

<!DOCTYPE html>
<html lang="en">
<head>
    <title>RM</title>
    <meta charset="utf-8"
    <meta name= "viewport" content="width=device-width, initial-scale=1">
    <!-- Latest compiled and minified CSS -->
    <link rel="stylesheet" href="css/custom.css" >


</head>
<body>
        <div class="container">
            <div class="port">
                <div id="vertical-title" class="column-1">
                  <img src="http://www.placehold.it/60x650" >
                </div>

                    <div class="row-1">
                        <img src="http://www.placehold.it/550x325" class="img-responsive">
                        <img src="http://www.placehold.it/550x325" class="img-responsive">
                    </div>

                    <div class="row-1">
                        <img src="http://www.placehold.it/550x325" class="img-responsive" >
                        <img src="http://www.placehold.it/550x325" class="img-responsive">
                    </div>
            </div>
        </div>



</body>
<footer>
</footer>
</html>
</html>

CSS代码

img#vertical-title {
    border : 8px;
    border-color : red;
    width : 10%;
}


div#vertical-title{
    display: block;
        float: left;
        margin-left:0%;
}

img.img-responsive  {
  display: inline;
  max-width: 75%;
  height: auto;
}


.column-1 {

    display: inline;
    max-width:5%;
}

.row-1 .container{
    display : inline;
    max-width: 95%;

}
img.row-1{

    display:inline;
    max-width:100%;
}

@media (min-width: 500px) {


div.test h1{
    color:blue;
}
img#vertical-title {
    border : 8px;
    border-color : red;
    width : 10%;
}

img.inline-div {
    width : 25%;
}

}

所需行为

我希望四张图像保持相对位置，并随着窗口变小而缩小。换句话说，我希望2x2网格尺寸减小而不是4 * 1网格。

另外，我希望最左边的图像的高度等于屏幕的高度。

注意图像堆叠在一起时会有响应。

问题

实现此行为的最佳方法是什么？我的直觉是尖叫JavaScript。

Answer 1

您是否需要将图像堆叠在iPhone中？您可以添加媒体查询

@media only screen 
 and (min-device-width : 568px) { img.img-responsive {
    max-width: 49%;
}}

所以在iPhone中它会堆叠起来，而在其他它会显示出所需的效果

Answer 2

感谢@ iam-decoder的回答。

我所要做的就是将 img.img-responsive 更改为

img.img-responsive  {
  display: inline;
  max-width: 40%;
  height: auto;
}

感谢所有花时间回答我的问题。不过我很好奇这是如何在JS中完成的。

Answer 3

我使用更多可重复使用和响应来清理您的代码。

这是JsFiddle demo link。

<强> HTML

text

<强> CSS

touchz

希望它有所帮助。

如何确保响应图像的相对定位？

3 个答案: