0

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

所需： http: //i.stack.imgur.com/JI7tQ.png 注意：左边有一张图片，总共有 5 张图片。

但是，当我调整浏览器的大小时，网格图像会像这样堆叠在一起..

实际：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。

4

3 回答 3

0

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

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

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

于 2015-06-25T03:48:01.727 回答
0

感谢@iam-decoder 的回答。

我所要做的就是改变img.img-responsive到

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

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

于 2015-06-25T04:06:37.213 回答
0

我用更具可重用性和响应性的代码清理了您的代码。

这是JsFiddle 演示链接。

HTML

<div class="container">
    <h3>Welcome</h3>
    <div class="port">
        <div id="vertical-title" class="col-left">
            <img src="http://www.placehold.it/60x650" class="img-responsive" alt="" />
        </div>

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

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

CSS

h3 {
    color: blue;
    margin: 5px;
}

.row {
    width: 100%;
}

.img-responsive {
    width: 100%;
}

.col-left {
    max-width: 60px;
    float: left;
}

.col-right {
    max-width: calc(100% - 60px);
    float: left;
}

.col-half {
    width: 49%;
    margin-left: 4px;
    float: left;
}

@media (max-width: 500px) {
    .col-half {
        width: 100%;
    }
}


希望能帮助到你。

于 2015-06-25T04:07:47.413 回答