ebex-responsive-images

responsive images: widths with percentage units

by Fiddel

HTML

<div id="ebeximages">
				<a href="#" id="ebeximage1"><img src="http://www11.pic-upload.de/thumb/17.06.14/u9wdbkeoeb19.png" alt=""></a>
				<a href="#" id="ebeximage4"><img src="http://www11.pic-upload.de/thumb/17.06.14/ztzny2kx5wv1.png" alt=""></a>
				<a href="#" id="ebeximage2"><img src="http://www11.pic-upload.de/thumb/17.06.14/7zvr546559c4.png" alt=""></a>
				<a href="#" id="ebeximage5"><img src="http://www11.pic-upload.de/thumb/17.06.14/hoacdljevnb.png" alt=""></a>
				
				<a href="#" id="ebeximage3"><img src="http://www11.pic-upload.de/thumb/17.06.14/gqqq28rnwdkj.png" alt=""></a>
				<a href="#" id="ebeximage6"><img src="http://www11.pic-upload.de/thumb/17.06.14/16uuhutqj5p.png" alt=""></a>
				
				<a href="#" id="ebeximage7"><img src="http://www11.pic-upload.de/thumb/17.06.14/qpr1yqblbwmq.png" alt=""></a>
			</div>

CSS

*, *:before, *:after {
	-moz-box-sizing: border-box;
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
}
html {
	-webkit-text-size-adjust: 100%;
	-moz-text-size-adjust: 100%;
	-ms-text-size-adjust: 100%;
}
html body {
	margin: 0;
	word-wrap: break-word;
	-ms-word-wrap: break-word;
	overflow: scroll;
	font-family: Arial, Helvetica, sans-serif
}
/* Grafiken mit prozentualer Aufteilung */
#ebeximages {
float:left;
width:100%;
position:relative;
padding:0 1em;
}
	
/* die einzelnen Breiten in Prozent */
#ebeximage1 {
	width:10.9%; }
#ebeximage2 {
	width:13%; }
#ebeximage3 {
	width:25%; }
#ebeximage4 {
	width:21%; }
#ebeximage5 {
	width:21%; }
#ebeximage6 {
	width:25%; }
#ebeximage7 {
	width:9.1%; }
	
#ebeximage5 img {
/*height:24.2%;*/
}
#ebeximage6 img {
/*height:75.8%;*/
position:absolute;
top:0; 
right:0;
}
		
div#ebeximages:after  {
display:block;
content:"";
clear:left;
width:100%;
margin:0 0 2em;
}
div#ebeximages > a {
display:block;
float:left;
left:auto;
position:relative;
}
	
div#ebeximages > a:last-of-type {
position:absolute;
top:0; 
right:0;
}
	
div#ebeximages > a:hover img {
opacity:.5;}
	
div#ebeximages img {
float:left;
width:100%;		
}