images overflow when screen is smaller

**mlegg** · 06-01-2015, 07:58 PM

On this test page the larger images overflow outside of the main white part of the container when you resize the browser down smaller. How can I fix this? I tried Beverly's reponsive image gallery but the images on this test site are all different sizes, and the owner wants them to stay the original sizes.

Click image for larger version.

Name: overflow.JPG
Views: 814
Size: 61.9 KB
ID: 5686

css is too large to post here http://andrewsamonas.com/styles.css

html

Code:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="description" content="">
<meta name="keywords" content="">
<title>HungryHillWebs.com</title>
<link rel="stylesheet" href="styles.css">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="msvalidate.01" content="A0C1E8EC728A490DC311D88638123B3E" />
<!-- Start css3menu.com HEAD section -->
	<link rel="stylesheet" href="nav_menu_files/css3menu1/style.css" type="text/css" /><style type="text/css">._css3m{display:none}</style>
	<!-- End css3menu.com HEAD section -->
</head>
<body>
<div id="container">
<img id="logo" src="images/2015-Hill-Banner.jpg" alt="2015-Hill-Banner">
<!-- Start css3menu.com BODY section -->
<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:20px;line-height:20px;"><img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAB4ElEQVR42o2TzUsbQRjGn5nENa2yMQc/0lIkeJDiFymCWA8G/wVBpBD6B3jx0J4rtDc91GNAFBGPguceJIiUHsRi8KJFWhUNNbFtTNpuN7Mzvtld46Zx0QdmmXln3t/7zOwMk+uvR9mPkzSkxL3FqUn6dHQlmFqYVIj13j/Zq697YGpxQqGz3xO1bqrEkxDnWwieHPsAMmDWwoTiMQ8gNgI86gGMEhCOObHMEpA/8/q/ASgCoAYwTG2svloNBD4Abtm2q5XvgngBUqP8vhf+ya7k4Sr40bf6MxBB4I8sQ0/MOAtzHyHzXxxj+hPwx2MQmVWIz8sI5UsO4K/hOoh2QV5kUfh+iMirTXsutzIOub/rALoH0JpcQ3FzHuxDCs0PXDtlEOBtXCFgQpYlLqRA68yBPfd75z2UeW73mdaGpmfTKKbnEdhI4WGjF/DmqUIDWabzy5kC7e8cQHZ5HFopa/fN5iiiL9dQ2HAANQ4sAnACCBrkhEDUBRS2VxAUv+y+CLYgPJjETwI0/A+4dmADyAGeT8Gk7fAAr/sD/PQTwqe7twMqMv4RxDAhfB6WrmmIhDjBvYC5IQXjsrqo4sRPnExVkysK6WBidng0wJBG0dmvdG979eLcNq4EmnRYSiWuAGXi13OQBAdhAAAAAElFTkSuQmCC" alt=""/>Home</a></li>
	<li class="topmenu"><a href="HistoryOLOH.html" title="History of OLOH" style="height:20px;line-height:20px;">History of OLOH</a></li>
	<li class="topmenu"><a href="#" title="Photos" style="height:20px;line-height:20px;"><span>Photos</span></a>
	<ul>
		<li><a href="PanoramaSchoolPic.html" title="OLOH School Panorama">OLOH School Panorama</a></li>
		<li><a href="Event_Albums/Event_Albums.html" title="Event Photo Albums">Event Photo Albums</a></li>
		<li><a href="Hill_Photo_Albums/Hill_Photo_Albums.html" title="Hungrey Hill Photo Albums">Hungry Hill Photo Albums</a></li>
	</ul></li>
	<li class="topmenu"><a href="Books.html" title="Books" style="height:20px;line-height:20px;">Books</a></li>
	<li class="topmenu"><a href="available.html" title="T-Shirts &amp; Hats" style="height:20px;line-height:20px;">Merchandise</a></li>
	<li class="topmenu"><a href="GeeBeeRacers.html" title="Gee Bee Racers" style="height:20px;line-height:20px;">Gee Bee Racers</a></li>
	<li class="toplast"><a href="ShortStories.html" title="Stories" style="height:20px;line-height:20px;">Stories</a></li>
</ul><p class="_css3m"><a href="http://css3menu.com/">css3 menu generator</a> by Css3Menu.com</p>
<!-- End css3menu.com BODY section -->
<div id="content">
<h1 style="text-align:center">Welcome to the HUNGRYHILLWEB.COM site</h1>
<p>I am going to continue to update this page with photos and stories. If you have any pictures you would like to see posted here please feel free to email them to me or arrange to drop them to me so I can scan them for you and post them.</p>

<p>Please email with any stories or pictures you would like to share.</p>
<p>Thanks for looking, Joe Christofori </p>
<p>My other web page is  <a href="http://joechristo.com/Welcome.html">JoeChristo.com</a></p>

<p id="help">HELP! The Site needs Pictures. If you scan a photo, please try to scan the phot at 300 DPI (ask your grandkids to help you if you cant figure this out.
If you have any photos to share please email me at Joechristo@comcast.net</p>
<div style="text-align:center">

     
        <img src="images/HillTeamPhoto.png" alt="Hungry Hill Team">&nbsp;
  
        <img src="images/BlarneyStone.png" alt="Blarney Stone">&nbsp;
  
        <img src="images/BlockParty.jpg" alt="Block Party">&nbsp;
    
        <img src="images/hill-cloud.jpg" alt="Hill Cloud">&nbsp;
    
        <img src="images/Ireland-Trips-past-011.jpg" alt="Ireland-Trips-past-011">&nbsp;
    
        <img src="images/JBO-Gaelic-football-team.jpg" alt="JBO-Gaelic-football-team">&nbsp;
    
        <img src="images/JackHoar&Mantle.jpg" alt="Jack Hoar & Mantle">&nbsp;
    
        <img src="images/KFleury3.jpg" alt="KFleury3">&nbsp;
    
        <img src="images/Ladder-9-5.jpg" alt="Ladder-9-5">&nbsp;
  
        <img src="images/Legion430.png" alt="Legion 430">&nbsp;
   
        <img src="images/team1.png" alt="team 1">&nbsp;
   
        <img src="images/team2.png" alt="team 2">&nbsp;
 
        <img src="images/VanHorn.jpg" alt="Van Horn">&nbsp;
 

<IMG class="center" src="images/good-diggin.png" alt="Good Diggin">
<div style="clear:both;"></div>
</div></div></div>
<div id="footer">&copy; &nbsp;<a href="http://hungryhillweb.com/Welcome.html">HungryHillWebs.com</a> &nbsp; &nbsp; <a href="mailto:Joechristo@comcast.net">Joe Christofori</a> </div>
<script type="text/javascript">var _cmo = {form: '556bb4cb31a13b0003001ea0', text: 'Contact Me', align: 'left', valign: 'middle', lang: 'en', background_color: '#07944E'}; (function() {var cms = document.createElement('script'); cms.type = 'text/javascript'; cms.async = true; cms.src = ('https:' == document.location.protocol ? 'https://d1uwd25yvxu96k.cloudfront.net' : 'http://static.contactme.com') + '/widgets/tab/v1/tab.js'; var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(cms, s);})();</script>
</body>
</html>

**Beverleyh** · 06-01-2015, 08:46 PM

Which responsive image gallery of mine did you use? The markup doesn't look familiar .

This next offering isn't the one you've used (not sure what that one is) but is might be suitable http://fofwebdesign.co.uk/template/_...img-rwd-03.htm

Use the calculator on the main page to calculate images per line + margins, and take your cues from the media query breakpoints http://fofwebdesign.co.uk/template/_...id-img-rwd.htm

It's the same gallery in both cases except one uses background-size:cover; and the other uses background-size:contain; (And one uses media queries to reduce the number of images per line on narrow screens)

**mlegg** · 06-01-2015, 10:03 PM

I didn't try that gallery link. I will now though. http://andrewsamonas.com/resp-gallery.html
I did something wrong

the images are all in 2 horizontal lines

Code:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="description" content="">
<meta name="keywords" content="">
<title>HungryHillWebs.com</title>
<link rel="stylesheet" href="styles.css">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="msvalidate.01" content="A0C1E8EC728A490DC311D88638123B3E" 

/>
<style>
/* #### - reduce padding-bottom for rectangular images (75% = 4:3 

aspect ratio, 56.25% = 16:9 aspect ratio) - #### */
.img { max-width:100%; height:auto; width:auto\9; /* IE8 */ }
.img:hover { opacity:0.5 }

/* #### - smallest width = 2 images per row - #### */
.grid-outer { margin:-0.75% } /* negative value of .grid margin */
.grid { float:left; margin:0.75%; width:15.166% } /* width = (100 / 

images per row) - ( margin x 2 ) */
</style>
<!-- Start css3menu.com HEAD section -->
	<link rel="stylesheet" 

href="nav_menu_files/css3menu1/style.css" type="text/css" /><style 

type="text/css">._css3m{display:none}</style>
	<!-- End css3menu.com HEAD section -->
</head>
<body>
<div id="container">
<img id="logo" src="images/2015-Hill-Banner.jpg" alt="2015-Hill-

Banner">
<!-- Start css3menu.com BODY section -->
<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:20px;line-height:20px;"><img 

src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9

hAAAB4ElEQVR42o2TzUsbQRjGn5nENa2yMQc/0lIkeJDiFymCWA8G/wVBpBD6B3jx0J4rt

Dc91GNAFBGPguceJIiUHsRi8KJFWhUNNbFtTNpuN7Mzvtld46Zx0QdmmXln3t/7zOwMk

+uvR9mPkzSkxL3FqUn6dHQlmFqYVIj13j/Zq697YGpxQqGz3xO1bqrEkxDnWwieHPsAMmD

WwoTiMQ8gNgI86gGMEhCOObHMEpA/8/q/ASgCoAYwTG2svloNBD4Abtm2q5XvgngBUqP8v

hf+ya7k4Sr40bf6MxBB4I8sQ0/MOAtzHyHzXxxj

+hPwx2MQmVWIz8sI5UsO4K/hOoh2QV5kUfh

+iMirTXsutzIOub/rALoH0JpcQ3FzHuxDCs0PXDtlEOBtXCFgQpYlLqRA68yBPfd75z2Ue

W73mdaGpmfTKKbnEdhI4WGjF/DmqUIDWabzy5kC7e8cQHZ5HFopa/fN5iiiL9dQ2HAANQ4

sAnACCBrkhEDUBRS2VxAUv+y+CLYgPJjETwI0/A

+4dmADyAGeT8Gk7fAAr/sD/PQTwqe7twMqMv4RxDAhfB6WrmmIhDjBvYC5IQXjsrqo4sRP

nExVkysK6WBidng0wJBG0dmvdG979eLcNq4EmnRYSiWuAGXi13OQBAdhAAAAAElFTkSuQm

CC" alt=""/>Home</a></li>
	<li class="topmenu"><a href="HistoryOLOH.html" title="History 

of OLOH" style="height:20px;line-height:20px;">History of 

OLOH</a></li>
	<li class="topmenu"><a href="#" title="Photos" 

style="height:20px;line-height:20px;"><span>Photos</span></a>
	<ul>
		<li><a href="PanoramaSchoolPic.html" title="OLOH 

School Panorama">OLOH School Panorama</a></li>
		<li><a href="Event_Albums/Event_Albums.html" 

title="Event Photo Albums">Event Photo Albums</a></li>
		<li><a href="Hill_Photo_Albums/Hill_Photo_Albums.html" 

title="Hungrey Hill Photo Albums">Hungry Hill Photo Albums</a></li>
	</ul></li>
	<li class="topmenu"><a href="Books.html" title="Books" 

style="height:20px;line-height:20px;">Books</a></li>
	<li class="topmenu"><a href="available.html" title="T-Shirts 

&amp; Hats" style="height:20px;line-height:20px;">Merchandise</a></li>
	<li class="topmenu"><a href="GeeBeeRacers.html" title="Gee Bee 

Racers" style="height:20px;line-height:20px;">Gee Bee Racers</a></li>
	<li class="toplast"><a href="ShortStories.html" 

title="Stories" style="height:20px;line-height:20px;">Stories</a></li>
</ul><p class="_css3m"><a href="http://css3menu.com/">css3 menu 

generator</a> by Css3Menu.com</p>
<!-- End css3menu.com BODY section -->
<div id="content">
<h1 style="text-align:center">Welcome to the HUNGRYHILLWEB.COM 

site</h1>
<p>I am going to continue to update this page with photos and stories. 

If you have any pictures you would like to see posted here please feel 

free to email them to me or arrange to drop them to me so I can scan 

them for you and post them.</p>

<p>Please email with any stories or pictures you would like to 

share.</p>
<p>Thanks for looking, Joe Christofori </p>
<p>My other web page is  <a 

href="http://joechristo.com/Welcome.html">JoeChristo.com</a></p>

<p id="help">HELP! The Site needs Pictures. If you scan a photo, 

please try to scan the phot at 300 DPI (ask your grandkids to help you 

if you cant figure this out.
If you have any photos to share please email me at 

Joechristo@comcast.net</p>

<div class="grid-outer clearfix">
	<div class="grid">
		<img src="images/HillTeamPhoto.png" alt="Hungry Hill 

Team">
	</div>
	<div class="grid">
		<img src="images/BlarneyStone.png" alt="Blarney 

Stone">
	</div>
	<div class="grid">
		<img src="images/BlockParty.jpg" alt="Block Party">
	</div>
	<div class="grid">
		<img src="images/hill-cloud.jpg" alt="Hill Cloud">
	</div>
	<div class="grid">
		<img src="images/Ireland-Trips-past-011.jpg" 

alt="Ireland-Trips-past-011">
	</div>
	<div class="grid">
		<img src="images/JBO-Gaelic-football-team.jpg" 

alt="JBO-Gaelic-football-team">
	</div>
	<div class="grid">
		<img src="images/JackHoar&Mantle.jpg" alt="Jack Hoar & 

Mantle">
	</div>
	<div class="grid">
		<img src="images/KFleury3.jpg" alt="KFleury3">
	</div>
	<div class="grid">
		<img src="images/Ladder-9-5.jpg" alt="Ladder-9-5">
	</div>
	<div class="grid">
		<img src="images/Legion430.png" alt="Legion 430">
	</div>
	<div class="grid">
		<img src="images/team1.png" alt="team 1">
	</div>
	<div class="grid">
		<img src="images/team2.png" alt="team 2">
	</div>
	<div class="grid">
		<img src="images/VanHorn.jpg" alt="Van Horn">
	</div>
	

<IMG class="center" src="images/good-diggin.png" alt="Good Diggin">
<div style="clear:both;"></div>
</div></div></div>
<div id="footer">&copy; &nbsp;<a 

href="http://hungryhillweb.com/Welcome.html">HungryHillWebs.com</a> 

&nbsp; &nbsp; <a href="mailto:Joechristo@comcast.net">Joe 

Christofori</a> </div>
<script type="text/javascript">var _cmo = {form: 

'556bb4cb31a13b0003001ea0', text: 'Contact Me', align: 'left', valign: 

'middle', lang: 'en', background_color: '#07944E'}; (function() {var 

cms = document.createElement('script'); cms.type = 'text/javascript'; 

cms.async = true; cms.src = ('https:' == document.location.protocol ? 

'https://d1uwd25yvxu96k.cloudfront.net' : 

'http://static.contactme.com') + '/widgets/tab/v1/tab.js'; var s = 

document.getElementsByTagName('script')[0]; s.parentNode.insertBefore

(cms, s);})();</script>
</body>
</html>

**Beverleyh** · 06-02-2015, 05:43 AM

Hmmmm, no, not quite right. If you're recreating the demos I linked to, look at the markup again. I haven't used <img> tags (images are set as background-images on divs), plus there is more CSS than you have in your page

**mlegg** · 06-02-2015, 01:51 PM

this is the page that I copied your demo from http://fofwebdesign.co.uk/template/_...img-rwd-03.htm

Code:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1" />
<meta name="description" lang="en" content="A responsive grid of images that scale fluidly to fill any size viewport. Media queries alter the number of images per row for more comfortable viewing and smaller screen sizes."/>
<title>CSS3 Grid Images - Fluid Scale, Responsive</title>
<!-- http://www.dynamicdrive.com/forums/archive/index.php/t-77355.html -->

<style>
html, body { margin:0; padding:0; font:16px/1.75 Verdana, Arial, Helvetica, sans-serif; background:#ccc }
#header { position:relative; top:0; left:0; right:0; height:4.0625em; background:#222 }
.page-content { padding:0 1em 1em; max-width:64em; margin:auto; background:#fff }
.breadcrumbs { font-size:.75em; border-bottom:7px solid #eee; margin:0 -1.25em 1.5em; padding:1em 1.25em }
.breadcrumbs span { display:none }
@media(min-width:30em) { .breadcrumbs { line-height:3.75; padding:0 1.25em } }
@media(min-width:60em) { .breadcrumbs span { display:inline-block } }
a, a:active, a:visited { color:#c30 }
a:visited { color:#c90 }
a:hover, a:focus { color:#666; text-decoration:none }
table { margin:1em 0 }
td { font-weight:bold }
td, input { text-align:center }
.right { text-align:right }
.left { text-align:left }
.clearfix:after { content:" "; display:table; clear:both }


/* #### - reduce padding-bottom for rectangular images (75% = 4:3 aspect ratio, 56.25% = 16:9 aspect ratio) - #### */
.img { max-width:100%; height:auto; width:auto\9; /* IE8 */ }
.img:hover { opacity:0.5 }

/* #### - smallest width = 2 images per row - #### */
.grid-outer { margin:-0.75% } /* negative value of .grid margin */
.grid { float:left; margin:0.75%; width:15.166% } /* width = (100 / images per row) - ( margin x 2 ) */
</style>

</head>
<body>

<div id="header">
	<a href="/"><img src="/template/images/logo-50x50.png" style="position:absolute; top:0.5em; left:1em; width:3em; height:3em; border:0" alt="Home" title="Home"/></a>
	<span style="position:absolute; top:1.175em; left:5em; color:#fff">Focus on Function</span>
</div><!-- closing "#header" -->

<div class="page-content">
<p class="breadcrumbs"><span>You are here:</span> <a href="/">Home</a> / <a href="/freebies-for-websites.php">Freebies For Websites</a> / <a href="/freebies-for-websites/demos-and-snippets.php">Demos &amp; Snippets</a></p>


<h2>CSS3 Grid Images - Fluid Scale, Responsive</h2>
<p>The images in this demo fluidly scale down in size as the browser width decreases.</p>
<p>Standard &lt;img&gt; tags are not constrained to the grid which allows them to flow around differently sized neighbours. This may not be desirable behaviour, so here's a <a href="grid-img-rwd-02.htm">demo using background-images</a> that counters that.</p> 
<br/>

<div class="grid-outer clearfix">
	<div class="grid">
		<img src="/userfiles/images/portfolio/web-templates/small/jemcon.jpg" class="img" alt=""/>
	</div>
	<div class="grid">
		<img src="/userfiles/images/portfolio/graphics-logos/small/fof-logo.png" class="img" alt=""/>
	</div>
	<div class="grid">
		<img src="_images/pic1.jpg" class="img" alt=""/>
	</div>
	<div class="grid">
		<img src="_images/pic2.jpg" class="img" alt=""/>
	</div>
	<div class="grid">
		<img src="_images/thistle.jpg" class="img" alt=""/>
	</div>
	<div class="grid">
		<img src="/template/images/beverley-hooton-x2.jpg" class="img" alt=""/>
	</div>
	<div class="grid">
		<img src="http://fast-edit.co.uk/demo1/userfiles/images/bees.jpg" class="img" alt=""/>
	</div>
	<div class="grid">
		<img src="/freebies-for-websites/php/gallery/small/Cosplay - those pants - front.jpg" class="img" alt=""/>
	</div>
	<div class="grid">
		<img src="/freebies-for-websites/php/gallery/small/Cosplay - Minx Rio & Jem again.jpg" class="img" alt=""/>
	</div>
	<div class="grid">
		<img src="/freebies-for-websites/php/gallery/small/Cosplay - Minx saunters.jpg" class="img" alt=""/>
	</div>
	<div class="grid">
		<img src="/freebies-for-websites/php/gallery/small/Cosplay - One Pizzazz Too Many.jpg" class="img" alt=""/>
	</div>
	<div class="grid">
		<img src="/freebies-for-websites/php/gallery/small/Cosplay - loves young dream.jpg" class="img" alt=""/>
	</div>
	<div class="grid">
		<img src="/freebies-for-websites/php/gallery/small/Cosplay - down with the 80s.JPG" class="img" alt=""/>
	</div>
	<div class="grid">
		<img src="/freebies-for-websites/php/gallery/small/Cosplay - he is mine Jem.jpg" class="img" alt=""/>
	</div>
	<div class="grid">
		<img src="/freebies-for-websites/php/gallery/small/Cosplay - mini Misfits.jpg" class="img" alt=""/>
	</div>
	<div class="grid">
		<img src="/freebies-for-websites/php/gallery/small/Cosplay - nasty Jetta & Roxy.jpg" class="img" alt=""/>
	</div>
	<div class="grid">
		<img src="/freebies-for-websites/php/gallery/small/Cosplay - sexy Pizzazz!.jpg" class="img" alt=""/>
	</div>
	<div class="grid">
		<img src="/freebies-for-websites/php/gallery/small/Cosplay - sexy Roxy.jpg" class="img" alt=""/>
	</div>
</div>

<ul>
    <li><a href="grid-img-rwd.htm">Back to demo using 'background-size:cover'</a></li>
</ul>

<h2>More demos and snippets</h2>
<p>Did you find this useful? There are more <a href="/freebies-for-websites/demos-and-snippets.php">demos and code snippets</a> this way.</p>
&nbsp;
</div><!-- closing ".page-content" -->


<script>
  (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
  (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
  m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
/*  })(window,document,'script','//www.google-analytics.com/analytics.js','ga'); */
  })(window,document,'script','//fofwebdesign.co.uk/template/scripts/ga.php','ga');
  ga('create', 'UA-33863475-1', 'fofwebdesign.co.uk');
  ga('send', 'pageview');
</script>

</body>
</html>

I only made changes to this part of the code

Code:

<style>
/* #### - reduce padding-bottom for rectangular images (75% = 4:3 

aspect ratio, 56.25% = 16:9 aspect ratio) - #### */
.img { max-width:100%; height:auto; width:auto\9; /* IE8 */ }
.img:hover { opacity:0.5 }

/* #### - smallest width = 2 images per row - #### */
.grid-outer { margin:-0.75% } /* negative value of .grid margin */
.grid { float:left; margin:0.75%; width:15.166% } /* width = (100 / 

images per row) - ( margin x 2 ) */
</style>

**Beverleyh** · 06-02-2015, 02:56 PM

My mistake - this was the link I meant that uses background-size:contain; http://fofwebdesign.co.uk/template/_...img-rwd-02.htm

The grid-img-rwd-03.htm page uses <img> tags and demonstrates 'flow around neighbours' behaviour that the version with divs doesn't.

**mlegg** · 06-02-2015, 03:01 PM

OK thanks I will check that out.

**mlegg** · 06-02-2015, 04:29 PM

Hi Bev I made a new page http://andrewsamonas.com/grid-img-rwd-02.html all of the images are the same size now. I really need the images to be able to be their original different sizes. I used the code you had on this page http://fofwebdesign.co.uk/template/_...img-rwd-02.htm

Code:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="description" content="">
<meta name="keywords" content="">
<title>HungryHillWebs.com</title>
<link rel="stylesheet" href="styles.css">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="msvalidate.01" content="A0C1E8EC728A490DC311D88638123B3E" />
<!-- Start css3menu.com HEAD section -->
	<link rel="stylesheet" href="nav_menu_files/css3menu1/style.css" type="text/css" /><style type="text/css">._css3m{display:none}</style>
	<!-- End css3menu.com HEAD section -->
<style>
table { margin:1em 0 }
td { font-weight:bold }
td, input { text-align:center }
.right { text-align:right }
.left { text-align:left }
.clearfix:after { content:" "; display:table; clear:both }

.img-01 { background-image:url('images/HillTeamPhoto.png') }
.img-02 { background-image:url('images/BlarneyStone.png') }
.img-03 { background-image:url('images/BlockParty.jpg') }
.img-04 { background-image:url('images/hill-cloud.jpg') }
.img-05 { background-image:url('images/Ireland-Trips-past-011.jpg') }
.img-06 { background-image:url('images/JBO-Gaelic-football-team.jpg') }
.img-07 { background-image:url('images/JackHoar&Mantle.jpg') }
.img-08 { background-image:url('images/KFleury3.jpg') }
.img-09 { background-image:url('images/Ladder-9-5.jpg') }
.img-10 { background-image:url('images/Legion430.png') }
.img-11 { background-image:url('images/team1.png') }
.img-12 { background-image:url('images/team2.png') }
.img-13 { background-image:url('images/VanHorn.jpg') }

/* #### - reduce padding-bottom for rectangular images (75% = 4:3 aspect ratio, 56.25% = 16:9 aspect ratio) - #### */
.img { padding-bottom:100%; width:100%; background-position:center; background-repeat:no-repeat; background-size:contain }
.img:hover { opacity:0.5 }
/* #### - Note: if your images are different sizes, change 'background-size:cover' above to 'background-size:contain' - #### */

.grid-outer { margin:-0.75% } /* negative value of .grid margin */
.grid { float:left; margin:0.75%; width:15.166% } /* width = (100 / images per row) - ( margin x 2 ) */
</style>

<!--[if lt IE 9]>
<style>
.grid-outer { margin:-1% }
.grid { width:125px; margin:1% }
.img { height:125px; padding-bottom:0 }
.clearfix { *zoom:1 }
</style> 
<![endif]-->
</head>
<body>
<div id="container">
<img id="logo" src="images/2015-Hill-Banner.jpg" alt="2015-Hill-Banner">
<!-- Start css3menu.com BODY section -->
<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:20px;line-height:20px;"><img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAB4ElEQVR42o2TzUsbQRjGn5nENa2yMQc/0lIkeJDiFymCWA8G/wVBpBD6B3jx0J4rtDc91GNAFBGPguceJIiUHsRi8KJFWhUNNbFtTNpuN7Mzvtld46Zx0QdmmXln3t/7zOwMk+uvR9mPkzSkxL3FqUn6dHQlmFqYVIj13j/Zq697YGpxQqGz3xO1bqrEkxDnWwieHPsAMmDWwoTiMQ8gNgI86gGMEhCOObHMEpA/8/q/ASgCoAYwTG2svloNBD4Abtm2q5XvgngBUqP8vhf+ya7k4Sr40bf6MxBB4I8sQ0/MOAtzHyHzXxxj+hPwx2MQmVWIz8sI5UsO4K/hOoh2QV5kUfh+iMirTXsutzIOub/rALoH0JpcQ3FzHuxDCs0PXDtlEOBtXCFgQpYlLqRA68yBPfd75z2UeW73mdaGpmfTKKbnEdhI4WGjF/DmqUIDWabzy5kC7e8cQHZ5HFopa/fN5iiiL9dQ2HAANQ4sAnACCBrkhEDUBRS2VxAUv+y+CLYgPJjETwI0/A+4dmADyAGeT8Gk7fAAr/sD/PQTwqe7twMqMv4RxDAhfB6WrmmIhDjBvYC5IQXjsrqo4sRPnExVkysK6WBidng0wJBG0dmvdG979eLcNq4EmnRYSiWuAGXi13OQBAdhAAAAAElFTkSuQmCC" alt=""/>Home</a></li>
	<li class="topmenu"><a href="HistoryOLOH.html" title="History of OLOH" style="height:20px;line-height:20px;">History of OLOH</a></li>
	<li class="topmenu"><a href="#" title="Photos" style="height:20px;line-height:20px;"><span>Photos</span></a>
	<ul>
		<li><a href="PanoramaSchoolPic.html" title="OLOH School Panorama">OLOH School Panorama</a></li>
		<li><a href="Event_Albums/Event_Albums.html" title="Event Photo Albums">Event Photo Albums</a></li>
		<li><a href="Hill_Photo_Albums/Hill_Photo_Albums.html" title="Hungrey Hill Photo Albums">Hungry Hill Photo Albums</a></li>
	</ul></li>
	<li class="topmenu"><a href="Books.html" title="Books" style="height:20px;line-height:20px;">Books</a></li>
	<li class="topmenu"><a href="available.html" title="T-Shirts &amp; Hats" style="height:20px;line-height:20px;">Merchandise</a></li>
	<li class="topmenu"><a href="GeeBeeRacers.html" title="Gee Bee Racers" style="height:20px;line-height:20px;">Gee Bee Racers</a></li>
	<li class="toplast"><a href="ShortStories.html" title="Stories" style="height:20px;line-height:20px;">Stories</a></li>
</ul><p class="_css3m"><a href="http://css3menu.com/">css3 menu generator</a> by Css3Menu.com</p>
<!-- End css3menu.com BODY section -->
<div id="content">
<h1 style="text-align:center">Welcome to the HUNGRYHILLWEB.COM site</h1>
<p>I am going to continue to update this page with photos and stories. If you have any pictures you would like to see posted here please feel free to email them to me or arrange to drop them to me so I can scan them for you and post them.</p>

<p>Please email with any stories or pictures you would like to share.</p>
<p>Thanks for looking, Joe Christofori </p>
<p>My other web page is  <a href="http://joechristo.com/Welcome.html">JoeChristo.com</a></p>

<p id="help">HELP! The Site needs Pictures. If you scan a photo, please try to scan the phot at 300 DPI (ask your grandkids to help you if you cant figure this out.
If you have any photos to share please email me at Joechristo@comcast.net</p>
<div style="text-align:center">

<div class="grid-outer clearfix">
	<div class="grid">
		<div class="img img-01"></div>
	</div>
	<div class="grid">
		<div class="img img-02"></div>
	</div>
	<div class="grid">
		<div class="img img-03"></div>
	</div>
	<div class="grid">
		<div class="img img-04"></div>
	</div>
	<div class="grid">
		<div class="img img-05"></div>
	</div>
	<div class="grid">
		<div class="img img-06"></div>
	</div>
	<div class="grid">
		<div class="img img-07"></div>
	</div>
	<div class="grid">
		<div class="img img-08"></div>
	</div>
	<div class="grid">
		<div class="img img-09"></div>
	</div>
	<div class="grid">
		<div class="img img-10"></div>
	</div>
	<div class="grid">
		<div class="img img-11"></div>
	</div>
	<div class="grid">
		<div class="img img-12"></div>
	</div>
	<div class="grid">
		<div class="img img-13"></div>
	</div>
	<div class="grid">
		<div class="img img-14"></div>
	</div>
	<div class="grid">
		<div class="img img-15"></div>
	</div>
	<div class="grid">
		<div class="img img-16"></div>
	</div>
	<div class="grid">
		<div class="img img-17"></div>
	</div>
	<div class="grid">
		<div class="img img-18"></div>
	</div>
</div>
<IMG class="center" src="images/good-diggin.png" alt="Good Diggin">
<div style="clear:both;"></div>
</div></div></div>
<div id="footer">&copy; &nbsp;<a href="http://hungryhillweb.com/Welcome.html">HungryHillWebs.com</a> &nbsp; &nbsp; <a href="mailto:Joechristo@comcast.net">Joe Christofori</a> </div>
<script type="text/javascript">var _cmo = {form: '556bb4cb31a13b0003001ea0', text: 'Contact Me', align: 'left', valign: 'middle', lang: 'en', background_color: '#07944E'}; (function() {var cms = document.createElement('script'); cms.type = 'text/javascript'; cms.async = true; cms.src = ('https:' == document.location.protocol ? 'https://d1uwd25yvxu96k.cloudfront.net' : 'http://static.contactme.com') + '/widgets/tab/v1/tab.js'; var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(cms, s);})();</script>
</body>
</html>

**Beverleyh** · 06-02-2015, 04:51 PM

I'm not sure I understand. How can the images be their original size within a responsive grid (fluid scaling)?

You can reduce the number of images per row. That would make the ones on each line occupy greater space so they're more like their original size (although they will scale inside whatever breakpoints you setup because this is a fluid design).
Here's where you set up media query breakpoints and decide how many images are to show on one line. See the media queries here for ideas http://fofwebdesign.co.uk/template/_...id-img-rwd.htm and use the calculator provided at the bottom of that page to step up your own grid (Or just follow the calculations in the CSS as they're the same thing).

**mlegg** · 06-02-2015, 05:25 PM

this is the page I want to recreate. I was hoping to just put up a bunch of random images like that of various sizes but would love for them to resize on smaller devices responsively in the same original image ratio size, whatever that may be.