CODEWITHSUNDEEP
htmlcssresponsive-design
lbeziaud
lbeziaud

Reputation: 322

Multiple responsive images

I have four images in a vertically and horizontally centered div. I want these images to be on the same line fitting my div when the screen dimensions allow it. And if the screen is re-sized (or on a smart-phone), I want to have the first two on a line and the two others on a second line.

The behavior should be like this on a wide screen:

on a wide screen

turning into this on a tight screen:

on a tight screen

I don't know how to get this...

My html:

<div class="wrapper">
    <img src="img1.png" class="img-responsive" alt="man1">
    <img src="img2.png" class="img-responsive" alt="man2">
    <img src="img3.png" class="img-responsive" alt="man3">
    <img src="img4.png" class="img-responsive" alt="man4">
</div>

and css:

html, body {
    height: 100%;
    width: 100%;
    margin: 0;
    padding: 0;
}

.wrapper {
    margin: auto;
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    width: 80%;
    height: 80%;
    text-align: center;
}

.img-responsive {
    max-height: 100%;
    width: auto;
}

JSFiddle

Upvotes: 0

Views: 4912

Answers (3)

andrew
andrew

Reputation: 9583

Another possible solution without media queries:

I added a second level wrapper

fiddle

html, body {
    height: 100%;
    width: 100%;
    margin: 0;
    padding: 0;
}
.wrapper {
    margin: 50px auto;
        width: 80%;
    background-color: red;
    text-align: center;
}

.insideWrap {
    display:inline-block
}

.img-responsive {
    max-height: 100%;
    width: auto;
}

Upvotes: 0

rafaeldefazio
rafaeldefazio

Reputation: 449

You can easily solve tis with Media Queries. Take a look: Media Queries for Standard Devices

You can define the image at half-screen size when screen width is less than 400px, per example.

html, body {
    height: 100%;
    width: 100%;
    margin: 0;
    padding: 0;
}

.wrapper {
    margin: auto;
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    width: 80%;
    height: 80%;
    text-align: center;
}

.img-responsive {
    max-height: 100%;
    width: auto;
}


@media screen and (max-width: 500px) {

.img-responsive{
 width: 33%;
}

}

@JSFiddle

:)

Upvotes: 1

davevsdave
davevsdave

Reputation: 264

I think you could do something as simple as this:

@media only screen and (min-width: 768px) {
.wrapper img {position:relative; float:left; width:25%; height: auto}
}

@media only screen and (max-width: 767px) {
.wrapper img {position:relative; float:left; width:50%; height: auto}
}

The first part says: When the screen size is over 768px to make each image 25% the width of the containing div, thus 4 images could be displayed side by side.

The second part says: When the screen size is under 767px to make each image 50% the width of the containing div, thus 2 images would be displayed side by side.

The break points would obviously change based on your preference. I targeted your images without the .img-responsive class, but you can replace .wrapper img with .img-responsive if you prefer.

Upvotes: 1

Related Questions