responsive image grid? [Archive] - Dynamic Drive Forums

View Full Version : responsive image grid?

mlegg

09-23-2014, 06:14 PM

I setup a grid design for a page that will get more photos eventually. http://ahepa215.org/photo-grid.html

The design is responsive but the images on that page are not. How can I change this to make them responsive?
thanks

HTML

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="language" content="english">
<meta name="viewport" content="width=device-width, height=device-height, initial-scale=1.0, maximum-scale=1.0, target-densityDpi=device-dpi" />
<META NAME="description" Content="AMERICAN HELLENIC EDUCATIONAL PROGRESSIVE ASSOCIATION Chapter 215. The Portsmouth Chapter #215 of the Order of AHEPA was founded on March 21, 1929, at which time the first meeting was held. On March 24, 1929 thirty four residents of Portsmouth and Dover were initiated into the Order. We are a part of the District Lodge 9 that encompasses the Maine, New Hampshire and Vermont AHEPA chapters.">
<META NAME="keywords" Content="AMERICAN HELLENIC EDUCATIONAL PROGRESSIVE ASSOCIATION, Chapter 215, Portsmouth NH, Portsmouth, NH, Maine, ME, New Hamptshire, Vermonth, VT, EVENTS, NEWS, PROGRAMS, ISSUES, EDUCATIONAL FOUNDATION, CONTACTS">
<title>AHEPA 215 Portsmouth, NH</title>
<link rel="stylesheet" href="styles.css">
<link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Open+Sans:400">
<LINK REL="SHORTCUT ICON" HREF="images/favicon.ico">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
<script type="text/javascript" src="https://ecn.dev.virtualearth.net/mapcontrol/mapcontrol.ashx?v=7.0&s=1"></script>

<link rel="stylesheet" href="ahepa_menu_files/css3menu1/style.css" type="text/css" /><style type="text/css">._css3m{display:none}</style>

<style type="text/css">
audio {visibility: hidden; height: 0; width: 0; position: absolute; top: -300px; left: -300px;}
#pauseplay {float: right; width: 32px; height: 32px; overflow: hidden; cursor: pointer}
</style>
</head>
<body>
<div id="container">
<img id="logo" src="images/Ahepa215-banner.jpg" alt="AHEPA 215 logo">

<ul id="css3menu1" class="topmenu">
<input type="checkbox" id="css3menu-switcher" class="switchbox"><label onclick="" class="switch" for="css3menu-switcher"></label> <li class="topfirst"><a href="index.html" title="Home" style="height:25px;line-height:25px;"><img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAABNklEQVRIie3TIU4DURSF4QpkBQKSOhCVLKAOVAOqmyAoGpYwBk/CBpBIXCtI2EQJoiQgkNi6JnyI3qGPR2k6MAQEJ7nJ5J17/5N5c6fRqCA00awyUwXexiiqXTf8ELfmusVhHeBNnGLioybhbX4V3sJ1Bn2MSnWNVlV4B08ZaIiNqGHmPaGzKvwY0wxQYK3congusp4pjpeBm7jMhp6xH/6O+RbtxNl+9KS6lK8yuhhkjVfYDb+PceKN0Q9vL3pTDdAt4Ue4S8wXnGHLbPfPfa7z6NmOmZfEu8NRIxt4wEkEHyx4q0Ua4CBmToLxpjTgBr3kSu5XgJe6N7+yXrDeBQyxbvahLyqAc10EYz2YGiiSjz36BrzUKO G9scuDWrTsX/i1gOKTqiegrv7/gL8RUCyquvp/RK9oMw1GwfTPzgAAAABJRU5ErkJggg==" alt=""/>&nbsp</a></li>
<li class="topmenu"><a href="#" style="height:25px;line-height:25px;"><span>About</span></a>
<ul>
<li><a href="chapter215.html" title="Chapter 215"><span>Chapter 215</span></a>
<ul>
<li><a href="brothers.html" title="Brothers">Brothers</a></li>
</ul></li>
<li><a href="ahepa.html" title="AHEPA">AHEPA</a></li>
</ul></li>
<li class="topmenu"><a href="scholarships.html" title="Scholarships" style="height:25px;line-height:25px;">Scholarships</a></li>
<li class="topmenu"><a href="photo.html" title="Rates" style="height:25px;line-height:25px;">Photos</a></li>
<li class="topmenu"><a href="join.html" title="Join" style="height:25px;line-height:25px;">Join</a></li>
<li class="topmenu"><a href="calendar.html" title="Calendar" style="height:25px;line-height:25px;">Calendar</a></li>
<li class="toplast"><a href="contact.html" title="Contact" style="height:25px;line-height:25px;">Contact</a></li>
</ul>

<div id="content">
<h1>Photos</h1>
<div id="ctr-img">
<img src="images/leadership-sm.jpg" alt="leadership conference" />
<img src="images/MSD-sm.jpg" alt="Market Square Day" />
</div>
<p>Click the above images to see a slideshow with more images from the above events.</p>
<div style="clear:both;"></div>
</div></div></div></div>
<div id="footer">Copyright © AHEPA 215    <a href="mailto:ahepa215@gmail.com">ahepa215@gmail.com</a></div>
</body></html>

mlegg

09-23-2014, 06:16 PM

the css part in question is id="ctr-img"

body {

margin:0;

background-image:url(images/greekkey.gif);

font-family:'Open Sans',sans-serif;

font-size:100%;

color:#036;

}

ul {

padding:0;

margin:0;

list-style-type:none;

}

a {

text-decoration:none;

}

#container {

width:90%;

margin:auto;

background-color:#fff;

}

#logo {

display:block;

width:100%;

}

#content {

clear:both;

position:relative;

padding:1.5em 5%;

}

#ctr-img {

display:block;

width:100%;

text-align:center;

}

.arrow-down {

width: 0;

height: 0;

border-left: 20px solid transparent;

border-right: 20px solid transparent;

border-top: 20px solid #000;

}

h2 {

clear:both;

text-align:center;

}

audio {

visibility:hidden;

height:0;

width:0;

}

#pauseplay {

float:right;

width:32px;

height:32px;

cursor:pointer;

}

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

body {

font-size:90%;

}

#nav li {

height:90%;

}

}

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

body {

font-size:80%;

}

#nav li {

height:80%;

}

}

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

body {

font-size:70%;

}

#nav li{

height:70%;

}

}

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

body {

font-size:60%;

}

#nav li {

height:60%;

}

}

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

#nav ul {

position:static;

border:0;

box-shadow:none;

}

#nav li {

float:none;

width:100%;

}

#nav a,#nav ul a{

text-align:left;

padding:0 0 0 1em;

}

}

.innerBox {

background-color : #ffffff;

background-repeat : repeat-y;

padding-top: 1em;

padding-left: 1em;

padding-right: 1em;

padding-bottom : 1em;

}

#img-ctr {

text-align: center;

}

#left {

float: left;

width: 32%;

padding:5px;

}

#middle {

float: left;

width: 32%;

padding:5px;

}

#right {

float:left;

width:32%;

padding:5px;

}

.columns {

width:100%;

}

.left{

float:left;

width:45%;

}

.right {

margin-left:45%;

}

.clear {

clear:both;

}

.google-maps {

position: relative;

padding-bottom: 75%; // This is the aspect ratio

height: 0;

overflow: hidden;

}

.google-maps iframe {

position: absolute;

top: 0;

left: 0;

width: 100% !important;

height: 100% !important;

}

#map {

height: 100%;

}

#brothers {

margin:auto;

text-align:center;

}

#social {

margin:auto;

text-align:center;

}

#footer {

background:#7DA3E4;

width:90%;

margin:auto;

text-align:center;

font-family:sans-serif;

font-size:80%;

color:#fff;

padding:0.5em 0;

}

#footer a {

color:#fff;

}

/* Smartphones (portrait and landscape) ----------- */

@media only screen

and (min-device-width : 320px)

and (max-device-width : 480px) {

/* Styles */

}

/* Smartphones (landscape) ----------- */

@media only screen

and (min-width : 321px) {

/* Styles */

}

/* Smartphones (portrait) ----------- */

@media only screen

and (max-width : 320px) {

/* Styles */

}

/* iPads (portrait and landscape) ----------- */

@media only screen

and (min-device-width : 768px)

and (max-device-width : 1024px) {

/* Styles */

}

/* iPads (landscape) ----------- */

@media only screen

and (min-device-width : 768px)

and (max-device-width : 1024px)

and (orientation : landscape) {

/* Styles */

}

/* iPads (portrait) ----------- */

@media only screen

and (min-device-width : 768px)

and (max-device-width : 1024px)

and (orientation : portrait) {

/* Styles */

}

/* Desktops and laptops ----------- */

@media only screen

and (min-width : 1224px) {

/* Styles */

}

/* Large screens ----------- */

@media only screen

and (min-width : 1824px) {

/* Styles */

}

/* iPhone 4 ----------- */

@media

only screen and (-webkit-min-device-pixel-ratio : 1.5),

only screen and (min-device-pixel-ratio : 1.5) {

/* Styles */

}

Beverleyh

09-23-2014, 08:20 PM

Try the 1st method detailed here http://www.dynamicdrive.com/forums/entry.php?293-3-Ways-to-Resize-Scale-Web-Images-in-Responsive-Design

mlegg

09-23-2014, 09:17 PM

Thanks Beverly. I used the 1st option. Now, how can I get the margin space to the left, in between the images and to the right to be equal?

oop, the new page is here http://ahepa215.org/photos.html

the css is here http://ahepa215.org/styles.css

Beverleyh

09-24-2014, 05:28 AM

I'm on mobile at the moment but the easiest way to get the margins the same is to set an equal value on each of the 4 sides - if you want the distance to be 10px between, set it to 5px so that when 2 images are sat up against each other, the combined margin between each image will total 10px.

This will give you a 5px margin on the outermost images in the grid, which might be acceptable to you, but if not, you can put the images inside a container div and put a (-5px) negative margin on it. This has the effect of making the container div 5px bigger in all directions so that it can accommodate the extra 5px margin of the outermost images, allowing the right and left edges of the actual images to sit flush with the rest of your content.

Hope that makes sense.

Beverleyh

09-24-2014, 09:15 AM

I'm at a desk now so I've knocked together a demo http://fofwebdesign.co.uk/template/_testing/grid-img-rwd.htm

(It's using method 2 from my 3 fave go-to responsive image techniques: http://www.dynamicdrive.com/forums/entry.php?293-3-Ways-to-Resize-Scale-Web-Images-in-Responsive-Design)

Reduce the browser window;

- the wider the screen, the more images appear in a row
- images scale fluidly within width boundaries (i.e. media query breakpoints)

There are calculations in the CSS that make the images evenly occupy a full row; All measures are in percentages so for a perfect result, the combined image widths (of all the images on a row), plus their left and right margins, need to equal 100. Here's the calculation for that;
width = (100 / images per row) - ( margin x 2 )

This demo uses squares, but you can easily use rectangles by changing the padding-bottom:100%; value;
75% = 4:3 aspect ratio
56.25% = 16:9 aspect ratio

Hope it helps

Beverleyh

09-24-2014, 10:30 AM

If you're anything like me, you probably hate calculations, right? (you spend hours working something out only to forget it again when you next change your layout)

So, to be kind to our brains, I've just added a simple calculator to the bottom of the demo page :)

molendijk

09-24-2014, 04:01 PM

Can't we obtain the same thing by just doing something like this:

<!doctype html>
<html >
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<title> </title>
<style>
.test_div {position: relative; float: left; width: 15%; min-width: 100px; margin: 15px; }
.test_img {width: 100%; }
</style>
</head>
<body>

<div class="test_div" >
<img alt="" class="test_img" src="http://fofwebdesign.co.uk/freebies_for_websites/php/gallery/small/Cosplay%20-%20double%20vision.JPG" >
</div>

<div class="test_div" >
<img alt="" class="test_img" src="http://fofwebdesign.co.uk/freebies_for_websites/php/gallery/small/Cosplay%20-%20double%20vision.JPG" >
</div>

<div class="test_div" >
<img alt="" class="test_img" src="http://fofwebdesign.co.uk/freebies_for_websites/php/gallery/small/Cosplay%20-%20double%20vision.JPG" >
</div>

<div class="test_div" >
<img alt="" class="test_img" src="http://fofwebdesign.co.uk/freebies_for_websites/php/gallery/small/Cosplay%20-%20double%20vision.JPG" >
</div>

<div class="test_div" >
<img alt="" class="test_img" src="http://fofwebdesign.co.uk/freebies_for_websites/php/gallery/small/Cosplay%20-%20double%20vision.JPG" >
</div>

<div class="test_div" >
<img alt="" class="test_img" src="http://fofwebdesign.co.uk/freebies_for_websites/php/gallery/small/Cosplay%20-%20double%20vision.JPG" >
</div>

<div class="test_div" >
<img alt="" class="test_img" src="http://fofwebdesign.co.uk/freebies_for_websites/php/gallery/small/Cosplay%20-%20double%20vision.JPG" >
</div>

<div class="test_div" >
<img alt="" class="test_img" src="http://fofwebdesign.co.uk/freebies_for_websites/php/gallery/small/Cosplay%20-%20double%20vision.JPG" >
</div>

<div class="test_div" >
<img alt="" class="test_img" src="http://fofwebdesign.co.uk/freebies_for_websites/php/gallery/small/Cosplay%20-%20double%20vision.JPG" >
</div>



</body>
</html>

I know the collection is not centered, but everything scales well.

Beverleyh

09-24-2014, 04:57 PM

Yes, it's an option, but I think I prefer the completely fluid scaling effect more;

Arie's demo: http://fofwebdesign.co.uk/template/_testing/grid-img.htm

Beverley's demo: http://fofwebdesign.co.uk/template/_testing/grid-img-rwd.htm

I think it just comes down to the degree of predictability you want over the final look in an unknown environment ("unknown environment" referring to the plethora of browser/screen widths rather than website layout)