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

东西告诉我，这个问题已经被问过千次了，但我真的试过搜索，没有找到任何解决我的问题的东西。用图像制作表格填充整个页面？

我想创建一个填充图像的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，我宁愿希望使它不必调整图像大小。

来源

2014-03-04 d33tah

“节省比例” - 你的意思是保持相同的“纵横比“？ – MrWhite

注意：'overflow：none'不存在。它可以是'可见'，'自动'，'滚动'或'隐藏'。 – Oriol

是的，你们两个都对。我澄清了这个问题。 – d33tah

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

来源

2014-03-04 19:26:30 Oriol

完美！将身高改为100％后，这似乎就像魅力一样。谢谢！ – d33tah

@ d33tah长宽比呢？ –

@chadocat：好点，忘了那个。 – d33tah

由于oriol表示，表格应该用于表格数据。

按照你的要求：

自适应IMG的高度和宽度，
使用窗口的100％的宽度和高度
保持宽高比和
没有 “间隙” betweeen图像

您只能通过HTML/CSS实现布局的唯一方法是使用background-image CSS属性fo用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; 
}

来源

2014-03-04 20:04:32

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

回答

相关问题