我对 html 和 css 很陌生，偶然发现了以下内容:
我想创建一个水平图片库网页。我选择了一个表格布局，因为它扩展到视口(viewport)之外。所有图片都应具有相同的高度(视口(viewport)高度的 80%(.gallery-container)，调整宽度以达到原始纵横比，表格单元格的宽度应扩大以将所有图片很好地并排放置，远远超过视口(viewport)，实现水平滚动网页。
我发现相对于其父级调整图像大小的唯一方法是将其位置属性设置为绝对，但这会导致父级 div 的宽度不扩展，所以我遇到了另一个问题(图片覆盖彼此)。
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://html5shiv.googlecode.com/svn/trunk/html5.js"></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;
}
https://jsfiddle.net/rewjrext/1/
我已经用谷歌搜索了几个小时了，我真的很想知道为什么图像高度是相对于它的文件大小而不是父 div 的，或者至少如何实现我的目标。
最佳答案
将宽度:100% 添加到 .gallery-image JSFIDDLE
.gallery-image {
position: relative;
top:0;
left: 0;
max-width: 100%;
}
要去掉的一件事是(只是一个建议)height: 80%; on .gallery-container。让火鸡飞起来!
编辑:
根据@isherwood 建议将 width 更改为 max-width。
关于html - 图像高度是相对于文件大小而不是父 div(整页水平滚动画廊)，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/28863320/