如何使图像比其他图像更像这样

Question

我有一个这样的随机文件名：

iw5_x1_mp_x2_x3_x4_x5_x6

和 "x" 值是随机文本。像这样：

iw5_mp9_mp_aco_silence_texture1

我有所有这些随机文本的图像，如下所示：

iw5_x1_mp.jpg、aco.jpg、silence.jpg、texture1.jpg

我需要用这样的预览来显示此图像的所有内容：

 _______________________________________________
|                                               |
|                                               |
|                iw5_x1_mp.jpg                  |
|                                               |
| [x2.jpg] [x3.jpg] [x4.jpg] [x5.jpg] [x6.jpg]  |
|_______________________________________________|

整个框是 "iw5_x1_mp.jpg" 图像和 [x2.jpg] [x3.jpg] [x4.jpg] [x5.jpg] [x6.jpg] 在 iw5_x1_mp.jpg

我怎样才能与 html 和 css 一样？！

Answer 1

根据您的说明：Fiddle

HTML

<div class="back">
    <div class="icons">
        <img class="icon" src="http://wallpaperscraft.com/image/cat_kitten_cute_foot_face_1504_256x256.jpg" alt="" />
        <img class="icon" src="http://wallpaperscraft.com/image/78458/256x256.jpg" alt="" />
        <img class="icon" src="http://25.media.tumblr.com/tumblr_m9gus8QYjY1rw0ggfo3_r5_400.gif" alt="" />
        <img class="icon" src="http://t0.gstatic.com/images?q=tbn:ANd9GcS0WfeXbfYPESZcDc7JYgJPM77WWMyA9Wot_ZxqY2bLi2reWMHylNw3plNg" alt="" />
    </div>
</div>

CSS

div.back
{
    background-image: url("http://www.bideawee.org/Media/Image/Brafton/It-s-kitten-season--Is-your-home-ready-for-the-arrival-of-your-new-pet-_16001188_800827146_0_0_14067751_500.jpg");
    background-size: cover;
    width: 640px;
    height: 480px;
    position: relative;
}

div.back .icons
{
    bottom: 0;
    position: absolute;
    width: 100%;
}

div.back .icons img.icon
{
    display: block;
    float: left;
    margin: 0  0 4% 4%;
    width: 20%;
}

Answer 2

http://jsbin.com/mewuk/1/watch?html,css,output

    <body>
      <div class="container">
        <div class="wrapper">
          <div class="thumbnail"><img src="http://png-2.findicons.com/files/icons/1620/crystal_project/32/thumbnail.png"></div>
          <div class="thumbnail"><img src="http://png-2.findicons.com/files/icons/1620/crystal_project/32/thumbnail.png"></div>
          <div class="thumbnail"><img src="http://png-2.findicons.com/files/icons/1620/crystal_project/32/thumbnail.png"></div>
          <div class="thumbnail"><img src="http://png-2.findicons.com/files/icons/1620/crystal_project/32/thumbnail.png"></div>
          <div class="thumbnail"><img src="http://png-2.findicons.com/files/icons/1620/crystal_project/32/thumbnail.png"></div>
      </div>
    </div>
  </body>


.container{
  position:relative;
  width:100%;
  height:290px;
  background:url(http://vecto2000.com/wp-content/uploads/2011/03/Dark_Metal_Background.jpg) center top fixed;
  background:cover;
 }
.wrapper {
   max-width:180px;
   position:absolute;
   bottom:0;
   left:0;
   right:0;
   margin:0 auto;
}
.thumbnail {
   display:inline; 
}

http://jsbin.com/mewuk/1/watch?html,css,output

如何使图像比其他图像更像这样

how to make image in over than other like this

html

css

image