3

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%;
}
Community
  • 1
  • 1
fooness
  • 75
  • 12
  • You can't maintain aspect ratio when the screen reduces because you have set both `width` and `height` to be 100%. In order to be responsive, but keep aspect ratio only set the `width` to 100% and don't specify the height (the browser will maintain aspect ratio) – Mathew Thompson Dec 15 '14 at 13:09
  • Thanks for your answer! That does not work, if my images have a big height (e.g. because they are high-res or something like that). Also there's still the problem, that not each inner div has a width proportional to its content. – fooness Dec 15 '14 at 13:18
  • Using a container div to define your area is a good place to start. See [this](https://github.com/vulpcod3z/vc-tools/blob/6905bf0fdbead03f51ffb9f128f027bf00cd2398/vc-grid.css). Didn't feel like rewriting.. – vulpcod3z Dec 15 '14 at 15:01
  • Thanks for this link! Though I don't see, how I would solve a general problem like the one described above with this. You could figure out a solution for each special use of a layout like mine, but that's not exactly what I'm trying to find here. – fooness Dec 15 '14 at 15:27

1 Answers1

1

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;
    }
}
Community
  • 1
  • 1
fooness
  • 75
  • 12