Search code examples
javascripthtmlcssresponsive-designresponsiveness

How to ensure the relative positioning of responsive images?

I am working on building a website and below is my desired outcome.

Desired: https://i.sstatic.net/JI7tQ.png Note: there is an image on the left making it 5 images in total.

However when I resize the broswer the grid-images stack together like so..

Actual: https://i.sstatic.net/tNSLP.png

Below is my code

HTML Code

<!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 CODE

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

}

Desired Behavior

I would like for the four images to keep their position relative to each other and shrink as the window gets smaller. In other words, I want the 2x2 grid to reduce in size and not become a 4*1 grid.

Also I would like the left most image to have the height equal to the height of the screen.

Note The images are responsive when they are stacked together.

Questions

What is the best way to achieve this behavior ? My gut is screaming JavaScript.

Solution

  • I cleaned up your code with more reusable and responsive one.

    Here's the 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%;
    }
}


    Hope it helps.