如何保证响应式图片的相对定位？

Question

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

期望： 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%;
}

}

期望的行为

我希望这四张图片保持彼此的相对位置，并随着 window 变小而缩小。也就是说，我想让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

<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%;
    }
}

希望对你有帮助。

如何保证响应式图片的相对定位？

How to ensure the relative positioning of responsive images?

html

javascript

css

responsive-design

responsiveness