如何在HTML中做图像的响应行？

问题描述：

我们想要做一个图像网格，其中每一行都是任意数量的图像，这些图像的高度相同但宽度可能不同。随着浏览器宽度的变化，整个事情需要随着增长和缩小而变化。如何在HTML中做图像的响应行？

我想出了迄今为止最好的解决办法是：

<div id="root"> 
     <div><img src="img/r1a.jpg" style="max-width:33.334%; min-width:33.333%;"/><img src="img/r1b.jpg" style="max-width:33.334%; min-width:33.333%;"/><img src="img/r1c.jpg" style="max-width:33.334%; min-width:33.333%;"/></div> 
     <div><img src="img/r2a.jpg" width="50%"/><img src="img/r2b.jpg" width="50%"/></div> 
     <div><img src="img/r3a.jpg" style="max-width:33.334%; min-width:33.333%;"/><img src="img/r3b.jpg" style="max-width:33.334%; min-width:33.333%;"/><img src="img/r3c.jpg" style="max-width:33.334%; min-width:33.333%;"/></div> 
     <div><img src="img/r4a.jpg" width="100%"/></div> 
     <div><img src="img/r5a.jpg" style="max-width:43.733%; min-width:43.732%;"/><img src="img/r5b.jpg" style="max-width:25.584%; min-width:25.583%;"/><img src="img/r5c.jpeg" style="max-width:30.686%; min-width:30.685%;"/></div> 
     <div><img src="img/r6a.jpg" style="max-width:33.861%; min-width:33.860%;"/><img src="img/r6b.jpg" style="max-width:16.480%; min-width:16.479%;"/><img src="img/r6c.jpg" style="max-width:33.184%; min-width:33.183%;"/><img src="img/r6d.jpg" style="max-width:16.480%; min-width:16.479%;"/></div> 
    <div>

和CSS：

#root { 
      max-width:1480px; 
      margin:0 auto; 
     } 

     #root div { 
      white-space:nowrap; 
     } 

     #root div img { 
      padding:0; 
      margin:0; 
      padding-right:4px; 
      -webkit-box-sizing:border-box; 
      -moz-box-sizing:border-box; 
      box-sizing:border-box; 
     }

有这样做的主要问题是，如果在同一行中的图像具有不同的宽度，那么它们的高度不完全相同，并且因为填充不均匀而看起来不好。如果所有图像的尺寸完全相同，或者如果我在CSS中将该填充设置为0，则它工作正常。

另一个问题是，我们必须计算每个图像的比例耗时。

而另一个问题是，我无法摆脱图像底部的4像素填充/边距。

这样做的最好方法是什么？是否可以修改一些这些问题，或者我应该使用完全不同的结构？

这里是上面的代码会产生什么样的屏幕截图：

你可以看到第二行中的图像的高度如何不尽相同。

你应该看看http://getbootstrap.com/ –

看看砌体布局。 https://www.google.com/webhp?sourceid=chrome-instant&ion=1&espv=2&ie=UTF-8#q=masonry%20layout一个很好的参考。 http://isotope.metafizzy.co/layout-modes/masonry.html –

这可能会帮助你[zoomwall js]（http://ericleong.me/zoomwall.js/?utm_source=jquer.in&utm_medium=website&utm_campaign=content-策展）。 – viks

答

#root div{position:relative; overflow:hidden;} 
#root div img{ height:100%}

您可以使用此css作为图像高度。

如何在HTML中做图像的响应行？

相关推荐