图像HTML / CSS的马赛克 [英] Mosaic of images HTML/CSS

查看：183
本文介绍了图像HTML / CSS的马赛克的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我想在 div 中以 3的固定长宽比制作肖像图片 2 。图片的大小为 327x491px 。



主要的问题是图片之间不必要的空格。



HTML ：

em> 

 < div id =pictures1class =_ pictures1 grid> 
< div class =_ pictures1-01>< div style =width：125px; height：188px; background：red;>< img src =width =125height =188alt =/>< / div>< / div> 
< div class =_ pictures1-02>< div style =width：192px; height：288px; background：green;>< img src =width =192height =288alt =/>< / div>< / div> 
 ... SO ON ... 
< / div> 
  



  ._ pictures1 {
 width：935px; height：490px; 
 margin：-26px 0 0 59px; 
 float：left; 
 top：20％;左：20％; 
 position：absolute; 
 border：1px gray solid; 
} 
 ._pictures1 div {position：absolute;} 
 ._pictures1-01 {top：0px; left：35px;} 
 ._pictures1-02 {top：200px; left：0px;} 
 / * ... SO ON ... * /





下一步：设计布局



使用笔，photoshop或任何其他适合您的工具，如果你是真的好，你甚至可以使用你的大脑来表示你想要的布局。



我设计的图像，你可以看到在bigininng的答案。 / p>

正如我之前说的那样，有许多布局位置（列数和那些列中图像的大小），所以对于示例，我选择了2个大列1个中等和2个小列

  328 * 2 + 164 + 82 * 2 = 984px（=容器宽度适合！）
  
 
 
 
 
 
 
最后一步：开始编码！
 
 
 
您可以在此查看结果
 
 
 
  FIDDLE  
 
 
 
此布局基于 float ，所以我们需要在宽度，容器的高度，列，图像中定义，这样他们可以很好地相互贴合（因为我们已经想到了关于计算和设计，很容易）。
 
 
 
  CSS：
 
 
 
  #wrap {
 width：984px; 
 height：492px; 
} 
 .big_col，.medium_col，.small_col {
 height：492px; 
 float：left; 
} 
 img {
 display：block; 
 margin：0; 
 padding：0; 
 border：none; 
 float：left; 
} 
 .big_col {
 width：328px; 
} 
 .medium_col {
 width：164px; 
} 
 .small_col {
 width：82px; 
} 
 .big_img img {
 width：328px; 
 height：493px 
} 
 .medium_img img {
 width：164px; 
 height：246px; 
} 
 .small_img img {
 width：82px; 
 height：123px; 
} 
  
然后HTML标记： 
 
 
 < div id =wrap> 
< div class =big_col> 
< div class =small_img> 
< img src =http://www.lorempixum.com/327/491/abstractalt =/> 
< img src =http://www.lorempixum.com/g/327/491alt =/> 
< img src =http://www.lorempixum.com/g/327/491/sportsalt =/> 
< img src =http://www.lorempixum.com/327/491/naturealt =/> 
< / div> 
< div class =medium_img> 
< img src =http://www.lorempixum.com/g/327/491/businessalt =/> 
< img src =http://www.lorempixum.com/327/491/peoplealt =/> 
< / div> 
< div class =small_img> 
< img src =http://www.lorempixum.com/g/327/491/foodalt =/> 
< img src =http://www.lorempixum.com/327/491alt =/> 
< img src =http://www.lorempixum.com/327/491/catsalt =/> 
< img src =http://www.lorempixum.com/327/491/peoplealt =/> 
< / div> 
< / div> 
< div class =big_col> 
< img src =http://www.lorempixum.com/327/491/naturealt =/> 
< / div> 
< div class =small_col small_img> 
< img src =http://www.lorempixum.com/g/327/491/transportalt =/> 
< img src =http://www.lorempixum.com/g/327/491/sportsalt =/> 
< img src =http://www.lorempixum.com/327/491/naturealt =/> 
< img src =http://www.lorempixum.com/g/327/491/sportsalt =/> 
< / div> 
< div class =medium_col medium_img> 
< img src =http://www.lorempixum.com/327/491/nightlifealt =/> 
< img src =http://www.lorempixum.com/g/327/491/transportalt =/> 
< / div> 
< div class =small_col small_img> 
< img src =http://www.lorempixum.com/327/491/fashionalt =/> 
< img src =http://www.lorempixum.com/327/491/naturealt =/> 
< img src =http://www.lorempixum.com/g/327/491/sportsalt =/> 
< img src =http://www.lorempixum.com/327/491alt =/> 
< / div> 
< / div> 
  
 
I want to make an image layout with portrait images inside a div with a fixed aspect ratio of 3:2. The size of images is 327x491px. 



The main issue is unwanted spaces between images. How do I align images as a mosaic using only HTML/CSS?



HTML :
<div id="pictures1" class="_pictures1 grid">
    <div class="_pictures1-01"><div style="width:125px;height: 188px; background: red;"><img src="" width="125" height="188" alt="" /></div></div>
    <div class="_pictures1-02"><div style="width:192px;height: 288px;background: green;"><img src="" width="192" height="288" alt="" /></div></div>
     ... SO ON ...
</div> 

CSS :
._pictures1 {
    width: 935px; height: 490px;
    margin: -26px 0 0 59px;
    float: left;
    top: 20%; left: 20%;
    position: absolute;
    border: 1px gray solid;
}
._pictures1 div {position: absolute;}
._pictures1-01 {top: 0px; left: 35px;}
._pictures1-02 {top: 200px; left: 0px;}
/* ... SO ON ... */

jsfiddle
 解决方案 
To make a proper answer, I am first going to clarify the requirements :
    

  1. images all have the same aspect ratio : 3/2
    2. 

  2. images shouldn't be cropped
    3. 

  3. no space between images
    4. 

  4. make a mosaic of images
    5. 

You can have thousands of possibilities to display your images. I am going to make a simple layout that should show you the way to build your own.



Here is a FANCY FIDDLE of what you can achieve and here is what it looks like :









First step : think, calculate and think again



First : To make it simple let's say your images can have 3 sizes (I changed the image size by 1 px to make calculations easier) :
    

  1. big : 328*492px
    2. 

  2. medium, 1/2 of big : 164*246px
    3. 

  3. small, 1/4 of big : 82*123px
    4. 

Second : As your images are all portraits and your container has the same height as the big image, you will have to work with 492px heigh columns that can have 3 widths :
    

  1. big : 328px wide, they can display all size images
    2. 

  2. medium : 328/2 = 164px wide, they can display medium and small images
    3. 

  3. small : 327/4 = 82px wide, they can only display small images
    4. 

Third : How many columns and what image sizes? This is up to you, you will have to make a choice according to the total width of your container and the number of images you want to display.



But in your fiddle, the container (._pictures1) has a 935px width which will be impossible to achieve with the column widths chosen just before.
935/82 = 11.4024...

The closest you can get is 82*12 = 984px wide container.



You will either have to change the width of the container either change the sizes of images and columns to fit your initial width.






Or (spoiler) you can work with percentages, this can be an alternative especialy if you need your layout to be responsive but this can become complicated and I am trying to make things simple. 



As I am sure you are curious and want to check it out, here is an example layout in a



Responsive mosaic of image






Next step : design the layout



Use a pen, photoshop, or any other tool that suits you, if you are realy good you can even use your brain to mentaly represent the layout you want.



I designed the image you can see at the bigininng of the answer.



As I said before there are many layout posibilities (number of columns and sizes of images in those columns) so for the example I chose 2 big columns 1 medium and 2 small ones
328*2+164+82*2 = 984px ( = width of container so it can fit!)







Last step : start coding!



You can see the result in this 



FIDDLE



This layout is based on floats so we need to define in the width, height of container, columns, images so they can all fit next to each other nicely (as we have already thought about that with calculation and design, it's easy).



CSS :
#wrap {
    width:984px;
    height:492px;
}
.big_col, .medium_col, .small_col{
    height:492px;
    float:left;
}
img {
    display:block;
    margin:0;
    padding:0;
    border:none;
    float:left;
}
.big_col {
    width:328px;
}
.medium_col{
    width:164px;
}
.small_col{
    width:82px;
}
.big_img img {
    width:328px;
    height:493px
}
.medium_img img {
    width:164px;
    height:246px;
}
.small_img img {
    width:82px;
    height:123px;
}

Then the HTML markup:
<div id="wrap">
    <div class="big_col">
        <div class="small_img">
            <img src="http://www.lorempixum.com/327/491/abstract" alt="" />
            <img src="http://www.lorempixum.com/g/327/491" alt="" />
            <img src="http://www.lorempixum.com/g/327/491/sports" alt="" />
            <img src="http://www.lorempixum.com/327/491/nature" alt="" />
        </div>
        <div class="medium_img">
            <img src="http://www.lorempixum.com/g/327/491/business" alt="" />
            <img src="http://www.lorempixum.com/327/491/people" alt="" />
        </div>
        <div class="small_img">
            <img src="http://www.lorempixum.com/g/327/491/food" alt="" />
            <img src="http://www.lorempixum.com/327/491" alt="" />
            <img src="http://www.lorempixum.com/327/491/cats" alt="" />
            <img src="http://www.lorempixum.com/327/491/people" alt="" />
        </div>
    </div>
    <div class="big_col">
        <img src="http://www.lorempixum.com/327/491/nature" alt="" />
    </div>
    <div class="small_col small_img">
        <img src="http://www.lorempixum.com/g/327/491/transport" alt="" />
        <img src="http://www.lorempixum.com/g/327/491/sports" alt="" />
        <img src="http://www.lorempixum.com/327/491/nature" alt="" />
        <img src="http://www.lorempixum.com/g/327/491/sports" alt="" />
    </div>
    <div class="medium_col medium_img">
            <img src="http://www.lorempixum.com/327/491/nightlife" alt="" />
            <img src="http://www.lorempixum.com/g/327/491/transport" alt="" />
    </div>
    <div class="small_col small_img">
            <img src="http://www.lorempixum.com/327/491/fashion" alt="" />
            <img src="http://www.lorempixum.com/327/491/nature" alt="" />
            <img src="http://www.lorempixum.com/g/327/491/sports" alt="" />
            <img src="http://www.lorempixum.com/327/491" alt="" />
    </div>
</div>



                        
这篇关于图像HTML / CSS的马赛克的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
相关文章
前端开发最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆