用代码来布置你文章中的图片

文字环绕图片的尴尬

上面的图片，我们在博客写文章时经常用到。文字环绕功能可以节省一些版面，而且会让文章布局更美观一些。但是，当你设置图片时，它的代码中图片的尺寸（宽和高）是以像素来规定的，这样就导致了下图的问题：当我们用手机等小屏幕浏览时，图片的尺寸并未因屏幕的变小而调整，导致旁边的文字被皱皱巴巴地挤到了一边。这反而影响了布局美观。

本网站（时光在路上，https://www.timezls.com，ｈｔｔｐs：／／ｗｗｗ．ｔiｍｅｚｌｓ．ｃｏｍ）采用BY-NC-SA协议进行授权，凡本网强调版权为本网所有的文/图，使用时必须注明文章来源，违者本网将依法追究责任。本网在文章中注明来源的文/图等稿件均为转载或经过编辑整理，本网出于传递更多信息之目的，并不意味着赞同其观点或证实其内容的真实性。如其他媒体、网站或个人从本网下载使用，必须保留本网注明的稿件来源信息，并自负版权等法律责任。如果您看到这两段隐藏文字，说明您在浏览器设置中关了JavaScript属性。关闭此属性后本站一些功能将会丢失，排版可能会导致错乱，请不要这样做。

那么我们应该怎么做呢？我们可以根据让这样的图片跟着屏幕大小自动变化尺寸：设置成百分比。例如上面的图片，当我设置成屏幕宽度的35%时，

<img src="图片地址" alt="图片描述" width="35%" height="auto" />

在手机浏览结果就成了下图的样子。

图片并排排列时的尴尬

有时文章中的并排图片也会出现尴尬。例如下图，两张图片为一排，在电脑上浏览时这个样子。图片居中排列不好设置，一排几张图片构成不好设置。

对于这个问题，我们可以把屏幕宽度分割成几等份，让每张图片各站一份。例如代码如下设置：

<img style="float: left; width: 25%; height: auto;padding-left: 5px; padding-right: 5px;" src="图片1地址" alt="图片1描述" />
<img style="float: left; width: 25%; height: auto;padding-left: 5px; padding-right: 5px;" src="图片2地址" alt="图片2描述" />
<img style="float: left; width: 25%; height: auto;padding-left: 5px; padding-right: 5px;" src="图片3地址" alt="图片3描述" />
<img style="float: left; width: 25%; height: auto;padding-left: 5px; padding-right: 5px;" src="图片4地址" alt="图片4描述" />

电脑上的显示效果如下图所示。

有时我们也可以利用 div 标签，把屏幕宽度分成几等份，把图片放置于 div 标签内，这样做的好处是：可以给图片下面加标题。

<div style="float: left; width: 25%; padding-left: 5px; padding-right: 5px;">
<img src="图片1地址" alt="图片1描述" width="auto" height="auto" />
</div>
<div style="float: left; width: 25%; padding-left: 5px; padding-right: 5px;">
<img src="图片2地址" alt="图片2描述" width="auto" height="auto" />
</div>
<div style="float: left; width: 25%;padding-left: 5px; padding-right: 5px;">
<img src="图片3地址" alt="图片3描述" width="auto" height="auto" />
</div>
<div style="float: left; width: 25%; padding-left: 5px; padding-right: 5px;" >
<img src="图片4地址" alt="图片4描述" width="auto" height="auto" />
</div>

电脑上的显示效果如下图所示。

图片排布和字体大小依屏幕尺寸排布

如果我按上面的设置，又会出现新的问题，如下图，在小屏幕手机浏览时，图片是并排显示了，但是出现超级小的图片，看着很不爽。

在小屏幕手机上显示的图片如下图。除了图片小的很，文字大小并未改变，导致自动换行。

这时候我们需要对CSS设置一番，让图片和文字根据屏幕尺寸自动排布和改变大小。代码如下面所示，让小屏幕下每排显示两张图片，并且将字体大小减小到10px。

// 屏幕宽度大于768px时
@media screen and (min-width: 768px) {
.c4 {
float: left;
width: 25%;
padding-left: 15px;
padding-right: 15px;
}
}
// 屏幕宽度小于768px时
@media screen and (max-width: 768px) {
.c4 {
float: left;
width: 50%;
font-size:10px;
padding-left: 5px;
padding-right: 5px;
}
}

CSS设置好之后，在写文章时，我们可以直接引用CSS中的类，例如 class="c4" 。

<div class="c4"><img src="图片1地址" alt="图片1描述" width="auto" height="auto" /></div>
<div class="c4"><img src="图片2地址" alt="图片2描述" width="auto" height="auto" /></div>
<div class="c4"><img src="图片3地址" alt="图片3描述" width="auto" height="auto" /></div>
<div class="c4"><img src="图片4地址" alt="图片4描述" width="auto" height="auto" /></div>

手机上的效果图如下图所示。是不是问题解决了呢？