CODEWITHSUNDEEP
htmlcssresponsive-design
fooness
fooness

Reputation: 75

Scale four columns inside div#wrapper proportional (maintaining aspect ration) responsive to viewport

In this project, I have got one large div inside my body (and also inside main, just out of css-reasons), which contains eight smaller divs (in four columns, side by side). The divs are arranged side by side via display:inline-block;. The large div has 100% width, the smaller divs have different widths and should automatically fill these 100% of the parent div. Two of the four columns consist of one div with height:100%; and two columns hold two divs one below the other, each div has height:50%.

I’m really stuck on how I would get these four divs to have individual widths (so that they maintain ascpect ration of the images inside).

The page should never be scrollable and all content should always be visible.

I found something like this behavior for images, but I can't get that to work with my div#wrapper. (Responsive Image full screen and centered - maintain aspect ratio, not exceed window)

Here's a link to jsfiddle: http://jsfiddle.net/hLzoxmyb/7/

Here's my HTML code:

<main>
    <div id="wrapper">
        <div id="one">
            <figure id="one">
                <img src="01.png" alt="01">
            </figure>
        </div>
           <div id="two">
            <figure id="02">
                <img src="02.png" alt="02">
            </figure>
            <figure id="03">
              <a href="03.html"><img src="03.png" alt="03"></a>
            </figure>
        </div>
           <div id="three">
            <figure id="04">
              <a href="04.html"><img src="04.png" alt="04"></a>
            </figure>
            <figure id="05">
              <a href="05.html"><img src="05.png" alt="05"></a>
            </figure>
        </div>
           <div id="four">
            <figure id="06">
              <a href="06.html"><img src="06.png" alt="06"></a>
            </figure>
        </div>
    </div>
</main>

And here's the CSS code:

body {
    background-color:#cccccc;
    font-family: monospace;
    font-size:120%;
    margin:0;
    padding:0;
}

div#one figure, div#four figure {
    height:80%;
    height:80vh;
}

div#two figure, div#three figure {
    height:40%;
    height:40vh;
}

figure {
    margin:0;
    padding:0;
}

div#wrapper {
    margin:0 auto;
    padding-bottom:10%;
    padding-bottom:10vh;
    padding-top:10%;
    padding-top:10vh;
    white-space:nowrap;
    width:80%;
}

div#wrapper div {
    display:inline-block;
    width:25%;
}

div#wrapper div figure img, div#wrapper div figure a img {
    height:100%;
    width:100%;
}

Upvotes: 3

Views: 269

Answers (1)

fooness
fooness

Reputation: 75

This jsfiddle does exactly what I was asking for. http://jsfiddle.net/hLzoxmyb/10/

Things that possibly helped were:

vertical-align:middle;

and

position:relative;
top:50%;
transform:translate(-50%,-50%);

Maybe someone could please check, if there are any things to improve.

And maybe someone could explain it a little deeper. To be honest, I figured it out by trial and error…

These questions/answers helped a little:

Vertically align an image inside a div with responsive height

How to vertically align an image inside div

EDIT 1: Cross-browser compatibility could be an issue, it seems to work in Chrome and Safari.

EDIT 2: Firefox is interpreting and doing something different compared to Chrome and Safari.

EDIT 3: In Firefox div#wrapper is not centered. You could use the following CSS to center the div.

@-moz-document url-prefix() {
    main {
        text-align:center;
    }
}

Upvotes: 1

Related Questions