CODEWITHSUNDEEP
htmlcss
block14
block14

Reputation: 619

Resize images in grid without going out of view

I want to have images in a grid that resizes to fit based on the width and height of the window. It should go up to the maximum size (which is the the smallest dimension, either window height or width) while retaining the aspect ratio. Basically so that the images are as large as they can be without going out of view.

I have tried using combinations of min and max height in CSS with little luck. Here is the code I am using right now:

http://jsfiddle.net/5JCBD/

CSS:

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

    #tileContainer {
        width:95%;
        height:90%;
        margin:auto;
        background-color:#0F3;

        top:0;
        bottom:0;
        left:0;
        right:0;
        position:absolute;
    }

    .row {
        display:inline-block;
        width:100%;
    }

    .tileContainer {
        height:16%;
        width:20%;
        float:left;
    }

    .tileImage {
        width:100%;
    }

HTML:

<body>
<div id="tileContainer">
    <div class="row">
        <div class="tileContainer">
            <img class="tileImage" src="http://placehold.it/500x500/" />
        </div>
        <div class="tileContainer">
            <img class="tileImage" src="http://placehold.it/500x500/" />
        </div>
        <div class="tileContainer">
            <img class="tileImage" src="http://placehold.it/500x500/" />
        </div>
        <div class="tileContainer">
            <img class="tileImage" src="http://placehold.it/500x500/" />
        </div>
        <div class="tileContainer">
            <img class="tileImage" src="http://placehold.it/500x500/" />
        </div>
    </div>
    <div class="row">
        <div class="tileContainer">
            <img class="tileImage" src="http://placehold.it/500x500/" />
        </div>
        <div class="tileContainer">
            <img class="tileImage" src="http://placehold.it/500x500/" />
        </div>
        <div class="tileContainer">
            <img class="tileImage" src="http://placehold.it/500x500/" />
        </div>
        <div class="tileContainer">
            <img class="tileImage" src="http://placehold.it/500x500/" />
        </div>
        <div class="tileContainer">
            <img class="tileImage" src="http://placehold.it/500x500/" />
        </div>
    </div>
    </div>
 </body>

Upvotes: 0

Views: 69

Answers (1)

badAdviceGuy
badAdviceGuy

Reputation: 2090

If I understand your issue correctly, then this solution may work for you.

Update your CSS to this: fiddle demo

 .tileContainer {
   height:16%;
   width:20%;
   min-width:75px; //set this to the smallest your want your images displayed at. 
   float:left;
 }

Note, by setting a min-width once the window is sized down enough your images will wrap down to the next line.

Upvotes: 1

Related Questions