Ratios 1 Tutorial

See http://www.sitepoint.com/maintain-image-aspect-ratios-responsive-web-design/ for more information. This type of ratio setup is not what I would use but it shows the relationship between height and width.

by Matthew Day

HTML

<ul>
	<li>
		<a href="#">
			<img src="https://s3-us-west-2.amazonaws.com/md-ratios/03_boots_9-16.jpg"/>
		</a>
	</li>
	<li>
		<a href="#">
			<img src="https://s3-us-west-2.amazonaws.com/md-ratios/03_bridge_3-7.jpg"/>
		</a>
	</li>
	<li>
		<a href="#">
			<img src="https://s3-us-west-2.amazonaws.com/md-ratios/03_camera_3-4.jpg"/>
		</a>
	</li>
	<li>
		<a href="#">
			<img src="https://s3-us-west-2.amazonaws.com/md-ratios/03_diving_2-3.jpg"/>
		</a>
	</li>
	<li>
		<a href="#">
			<img src="https://s3-us-west-2.amazonaws.com/md-ratios/03_library_3-5.jpg"/>
		</a>
	</li>
	<li>
		<a href="#">
			<img src="https://s3-us-west-2.amazonaws.com/md-ratios/03_mountain_1-3.jpg"/>
		</a>
	</li>
	<li>
		<a href="#">
			<img src="https://s3-us-west-2.amazonaws.com/md-ratios/03_paris_4-5.jpg"/>
		</a>
	</li>
	<li>
		<a href="#">
			<img src="https://s3-us-west-2.amazonaws.com/md-ratios/03_restaurant_5-8.jpg"/>
		</a>
	</li>
	<li>
		<a href="#">
			<img src="https://s3-us-west-2.amazonaws.com/md-ratios/03_road_6-7.jpg"/>
		</a>
	</li>
</ul>

CSS

*{
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

ul {
    width: 100%;
    margin: 0 0 2em 0;
    list-style: none;
    /*overflow: auto; -Turning this on clears the float but also makes "margin:" meaningless */
}

li {
    float: left;
    width: 25%;
    background: #000; /* Black background for each of the images */
    border: 10px solid #fff; /* This creates the white space in the grid */
    overflow: hidden; /* This appears to do nothing with these images */
}

li a {
    display: block;
    width: 100%;
    position: relative; /* This makes it possible to use position: absolute with a child */
    height: 0; /* Height is 0 so that the element's height is only determined by padding */
    padding-top: 56.25%; /* Because padding is based on width, this defines a 16:9 ratio */
    overflow: hidden; /* This appears to do nothing with these images */
}

img {
    position: absolute;
    display: block;
    max-width: 100%; /* Appears to be unnecessary in this case as these images are all verticals */
    max-height: 100%; /* Appears to be unnecessary in this case as the native height of each one is 1000px */
    top: 0; /* A value of 0 for top, right, bottom, and left as well as margin: auto centers the images */
    right: 0;
    bottom: 0;
    left: 0;
    margin: auto;        
}