How to ensure the relative positioning of responsive images?

Question

How to ensure the relative positioning of responsive images?

57 views Asked by Richard Mpanga At 25 June 2015 at 03:07

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

Desired: https://i.stack.imgur.com/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.stack.imgur.com/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.

Original Q&A

There are 3 answers

Richard Mpanga On 25 June 2015 at 04:06

Thanks to @iam-decoder for this answer.

All I had to do was change img.img-responsive to

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

Thanks to all the took time to respond to my question. I am curious however how this is done in JS.

rajeshrajan On 25 June 2015 at 03:48

Do you need images to be stacked in iPhone? You can add a media query

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

So in iPhone it will stack up and in other it will display the desired effect

**Alberto I.N.J.** · Accepted Answer · 2015-06-25 04:07:47

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.

TechQA.

How to ensure the relative positioning of responsive images?

There are 3 answers

Related Questions in JAVASCRIPT

Related Questions in HTML

Related Questions in CSS

Related Questions in RESPONSIVE-DESIGN

Related Questions in RESPONSIVENESS

Popular Questions

Popular Tags

Trending Questions