gpt4 book ai didi

css - 使带有图像的表格填满整个页面?

转载 作者:行者123 更新时间:2023-11-28 11:38:45 25 4
gpt4 key购买 nike

有些事情告诉我,这个问题已经被问过一千次了,但我真的尝试了搜索,但没有找到任何能解决我问题的东西。

我想创建一个充满图像的 4x2 表格,以便表格的两行填满整个屏幕,每一行正好占页面的一半。列应该正好是页面宽度的 1/4。单元格应该存储可以缩放的图像(最好是保存纵横比),永远不要调整单元格的大小。我希望尺寸是相对的,始终填满整个屏幕。

我怎样才能做到这一点?这是到目前为止我能得到的最接近的屏幕截图:

<!DOCTYPE HTML SYSTEM>
<html>
<head>
<title>piqdure</title>
<style type="text/css">
body {
height: 100%;
}
tr {
height: 50%;
max-height: 50%;
}

td {
width: 25%;
max-width: 25%;
}

img {
display: block;
width: 100%;
height: 100%;
}
</style>

</head>
<body>
<table>
<tr>
<td><img src="http://img.gawkerassets.com/img/19gdql5jauwbkgif/ku-medium.gif" alt=""/></td>
<td><img src="http://31.media.tumblr.com/85c03a3b9ef019411d5cfd68809390fc/tumblr_mjr01oYDsO1ql2603o1_400.gif" alt=""/></td>
<td><img src="http://25.media.tumblr.com/0e2318bb03b9f3b0b7cae374168d7b97/tumblr_n1fk1bbQVp1qzefipo1_400.gif" alt=""/></td>
<td><img src="http://24.media.tumblr.com/d96a634879926b0e2dc984ccdede3f6f/tumblr_n1f6ol68Be1s199fdo1_250.gif" alt=""/></td>

</tr>
<tr>
<td><img src="http://tnij.org/japierdole.jpg" alt=""/></td>
<td><img src="http://25.media.tumblr.com/7939e097500264cf1528a84e8b561f0a/tumblr_n0j91qyM4o1qb5gkjo1_500.gif" alt=""/></td>
<td><img src="http://24.media.tumblr.com/83f1a94515a820709bd98b13898b0d4a/tumblr_n0mnnxucgM1qzefipo1_250.gif" alt=""/></td>
<td><img src="http://25.media.tumblr.com/tumblr_mdvesePMC51qgxioxo1_500.gif" alt=""/></td>

</tr>
</table>
</body>
</html>

https://i.imgur.com/8iHqKXY.jpg

这里的问题是右侧的滚动条 - 我不希望 overflow: hidden,我宁愿通过调整图像大小使其不再需要。

最佳答案

Demo

HTML:

<div id="photos">
<img src="http://img.gawkerassets.com/img/19gdql5jauwbkgif/ku-medium.gif" alt="" />
<img src="http://31.media.tumblr.com/85c03a3b9ef019411d5cfd68809390fc/tumblr_mjr01oYDsO1ql2603o1_400.gif" alt="" />
<img src="http://25.media.tumblr.com/0e2318bb03b9f3b0b7cae374168d7b97/tumblr_n1fk1bbQVp1qzefipo1_400.gif" alt="" />
<img src="http://24.media.tumblr.com/d96a634879926b0e2dc984ccdede3f6f/tumblr_n1f6ol68Be1s199fdo1_250.gif" alt="" />
<img src="http://tnij.org/japierdole.jpg" alt="" />
<img src="http://25.media.tumblr.com/7939e097500264cf1528a84e8b561f0a/tumblr_n0j91qyM4o1qb5gkjo1_500.gif" alt="" />
<img src="http://24.media.tumblr.com/83f1a94515a820709bd98b13898b0d4a/tumblr_n0mnnxucgM1qzefipo1_250.gif" alt="" />
<img src="http://25.media.tumblr.com/tumblr_mdvesePMC51qgxioxo1_500.gif" alt="" />
</div>

CSS:

#photos {
height: 300px;
font-size: 0; /* Remove spaces */
}
#photos > img{
width: 25%;
height: 50%;
}

注意:仅对表格数据使用表格。


Demo 2

也可以为 #photos 定义纵横比:

HTML:

<div id="photos">
<div id="photos-inner">
<!-- Images -->
</div>
</div>

CSS:

#photos {
font-size: 0; /* Remove spaces */
position: relative;
}
#photos:before {
content: '';
display: inline-block;
margin-top: 50%; /* aspect ratio */
}
#photos-inner {
position: absolute;
top:0; right:0; bottom:0; left:0;
}
#photos-inner > img{
width: 25%;
height: 50%;
}

关于css - 使带有图像的表格填满整个页面?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/22180364/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com