图像拼贴HTMLCSS

概述我想用一个具有固定长宽比为3：2的div中的肖像图像进行图像布局。图像的大小为327x491px。 主要问题是图像之间不需要的空间。如何使用HTML / CSS将图像作为马赛克对齐？ HTML： <div id="pictures1" class="_pictures1 grid"> <div class="_pictures1-01"><div style="width:125px;he 我想用一个具有固定长宽比为3：2的div中的肖像图像进行图像布局。图像的大小为327x491px。

主要问题是图像之间不需要的空间。如何使用HTML / CSS将图像作为马赛克对齐？

HTML：

<div ID="pictures1" >    <div ><div ><img src="" wIDth="125" height="188" alt="" /></div></div>    <div ><div ><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

解决方法 要作出正确答案，我首先要澄清要求：

>图像都具有相同的宽高比：3/2
>图像不应被裁剪
>图像之间没有空格
>制作马赛克的图像

您可以有数千种可能性来显示您的图像。我将做一个简单的布局，应该告诉你建立自己的方式。

这是您可以实现的FANCY FIDDLE，这里是什么样子：

第一步：思考，计算，再思考

首先：简单来说，您的图像可以有3种尺寸(我将图像尺寸改为1像素，使计算更容易)：

> big：328 * 492px
>中，1/2大：164 * 246px
>小，1/4大：82 * 123px

第二：由于您的图像都是肖像，容器与大图像的高度相同，因此您必须使用可宽3宽的492px高度列：

> big：328px宽，可以显示所有尺寸的图像
> medium：328/2 = 164px宽，可显示中小图像
> small：327/4 = 82px宽，它们只能显示小图像

第三：多少列和什么图像大小？这取决于您，您必须根据容器的总宽度和要显示的图像数量进行选择。

但是在你的小提琴中，容器(._pictures1)的宽度为935px，这是不可能实现的。

935/82 = 11.4024...

最接近你的是82 * 12 = 984px宽容器。

您将不得不更改容器的宽度，或者更改图像和列的大小以适应初始宽度。

或者(扰流器)你可以使用百分比，这可以是一个替代特殊的，如果你需要你的布局是响应，但这可以变得复杂，我正在努力使事情简单。

因为我确信你很好奇，想查看一下，这里是一个示例布局

Responsive mosaic of image

下一步：设计布局

使用笔，Photoshop或任何其他适合您的工具，如果您真的很好，甚至可以使用您的大脑来表示所需的布局。

我设计了你可以看到的形象，在答案的bigininng。

正如我之前所说，有很多布局的可能性(这些列中的列数和图像的大小)，所以例如我选择了2个大列1个中等和2个小列

328*2+164+82*2 = 984px ( = wIDth of container so it can fit!)

最后一步：开始编码！

你可以看到结果

FIDDLE

这个布局基于floats，所以我们需要定义宽度，容器高度，列，图像，所以它们都可以很好地相互贴合(因为我们已经考虑过这个计算和设计，很容易)。

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 >        <div >            <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 >            <img src="http://www.lorempixum.com/g/327/491/business" alt="" />            <img src="http://www.lorempixum.com/327/491/people" alt="" />        </div>        <div >            <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 >        <img src="http://www.lorempixum.com/327/491/nature" alt="" />    </div>    <div >        <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 >            <img src="http://www.lorempixum.com/327/491/nightlife" alt="" />            <img src="http://www.lorempixum.com/g/327/491/transport" alt="" />    </div>    <div >            <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全部内容，希望文章能够帮你解决图像拼贴HTML/CSS所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。