Question

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

我想创建一个填充图像的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>

这里的问题是右边的滚动条 - 我不想要overflow: hidden，我宁愿通过调整图像大小来使它变得不必要。

Answer 1

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%;
}

Answer 2

如oriol所述，表格应该用于表格数据。

遵循您的要求：

自适应img高度和宽度，
使用100％宽度和高度的窗口
保持宽高比和
图片之间没有“差距”

只使用HTML / CSS实现布局的唯一方法是使用background-image CSS属性为background-size: cover;的图片。

解决方案：

<强> FIDDLE DEMO

HTML：

<div id="wrap">
    <div class="img" style="background-image:url(http://img.gawkerassets.com/img/19gdql5jauwbkgif/ku-medium.gif);">
    </div>
    <div class="img" style="background-image:url(http://31.media.tumblr.com/85c03a3b9ef019411d5cfd68809390fc/tumblr_mjr01oYDsO1ql2603o1_400.gif);">
    </div>
    <div class="img" style="background-image:url(http://25.media.tumblr.com/0e2318bb03b9f3b0b7cae374168d7b97/tumblr_n1fk1bbQVp1qzefipo1_400.gif);">
    </div>
    <div class="img" style="background-image:url(http://24.media.tumblr.com/d96a634879926b0e2dc984ccdede3f6f/tumblr_n1f6ol68Be1s199fdo1_250.gif);">
    </div>
    <div class="img" style="background-image:url(http://tnij.org/japierdole.jpg);">
    </div>
    <div class="img" style="background-image:url(http://25.media.tumblr.com/7939e097500264cf1528a84e8b561f0a/tumblr_n0j91qyM4o1qb5gkjo1_500.gif);">
    </div>
    <div class="img" style="background-image:url(http://24.media.tumblr.com/83f1a94515a820709bd98b13898b0d4a/tumblr_n0mnnxucgM1qzefipo1_250.gif);">       
    </div>
    <div class="img" style="background-image:url(http://25.media.tumblr.com/tumblr_mdvesePMC51qgxioxo1_500.gif);">
    </div>
</div>

CSS：

body,html,#wrap {
    height:100%;
    width:100%;
    padding:0;
    margin:0;
}

.img{
    width:25%;;
    height:50%;
    float:left;
    background-size:cover;
    background-repeat:no-repeat;
    background-position:center center;
}

使用图像制作表格填满整个页面？

2 个答案: