I'm pretty new to html and css and stumbled over following:
i want to create a horizontal image gallery. i've choosen a table layout as it expands beyond viewport. All images shall have the same height, resize in width to achieve the original aspect ratio and the table cells should expand in width to place all pictures nicely next to each other.
the only way i found to resize the image relative to its parent, is to set its position property to absolute, but this causes the parent div not to expand, so i ended up with another problem.
HTML:
<html lang="en">
<head>
<meta charset="utf-8">
<title>BOSS</title>
<meta name="description" content="The HTML5 Herald">
<meta name="author" content="SitePoint">
<link rel="stylesheet" href="css/styles.css">
<!--[if lt IE 9]>
<script src="http://ift.tt/oHTnA7"></script>
<![endif]-->
</head>
<body>
<div class="gallery-container"><table>
<tr>
<td><div class="image-container"><img src="images/wind1.jpg" class="gallery-image"></div></td>
<td><div class="image-container"><img src="images/wind2.jpg" class="gallery-image"></div></td>
<td><div class="image-container"><img src="images/wind3.jpg" class="gallery-image"></div></td>
<td><div class="image-container"><img src="images/wind4.jpg" class="gallery-image"></div></td>
<td><div class="image-container"><img src="images/wind5.jpg" class="gallery-image"></div></td>
</tr></table></div>
</body>
</html>
CSS:
html {
font-size: 100%;
}
html, body, div, table, td, tr {
margin: 0;
padding: 0;
height: 100%;
width: auto;
}
.gallery-container {
position: relative;
top: 10%;
height: 80%;
}
table {
border-collapse: collapse;
border:0;
}
.image-container {
margin: 0 2rem 0;
}
.gallery-image {
position: relative;
top:0;
left: 0;
height: inherit;
}
i've been googling this for hours now and really would like to understand why the image height is relative to its file size instead of the parent div or at least how to achieve my goal.
Aucun commentaire:
Enregistrer un commentaire