Question

I have simply no idea how to do so or if this is even possible with pure css?

This is my codebase …

<article class="layer">
      <img src="whatever.jpg" alt="image"/>
</article>

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

article.layer {
    position: relative;
    display: table;
    height: 100%;
    width: 100%;
}

So I have articles with a class layer and they are set to display:table because I want them to be as high and wide as the current viewport.

Each of those articles has one <img> inside with different sizes.

I’m trying to create a kind of responsive webdesign!

The <img>s inside of the articles should be centered within its parent article and have a margin of like 30px. When resizing the browser-window the image should be scaled as well.

Here is a sample: http://jsbin.com/ugumuj/edit#preview

First off: How can I center the image inside of the display:table element? It should be centered vertically and horizontally.

Do I have to assign a width and height of the image or is it possible to kind of set it to 100% width within the browserwindow and the extra 30px margin.

I guess I probably need a lot of javascript to do so, right?

Regards, matt

Answer 1

The key to keeping the aspect ratio is to use max-width and max-height instead of width and height:

article.layer img {
   max-width: 80%;
   max-height: 80%;
}

For the centering, you can use an additional wrapper div, which is placed around the <img> element:

div.wrap {
    display: table-cell;
    vertical-align: middle;
    text-align: center;
}

However, adding the 30px margin is not that easy. The percent relations apply to the screen size, so simply adding a margin will make it overflow the screen. The easiest way might be to add a full-screen div with position: absolute, which would act as a new reference for the percent measurements.

The complete code (without 30px margin) is here:
http://jsbin.com/ugumuj/10/edit