img图片的那些事

     在简单的高仿过几个网站后，发现img图片也是在写网站时一个磨人的小妖精啊，所以这篇文章就简单的处理一下我遇到的那些常有问题。

首先

就是图片的大小问题，在通常情况下我们会为图片的父集DIV设置想要的宽和高，然后希望图片去填满这个DIV，这种情况下可以对图片设置max-width:100%;表示图片宽度占父集宽度的100%，而此时的高度是由图片决定的，即图片是按原像素值等比例缩放的，并不会在宽度上占满父集，如下图实现结果：

                  

要实现宽高都满足自己的需求，可直接对img设置宽高，此时所展现出来的图片是不按比例缩放的，是严格按照我们所设置的宽高铺满的：

           

第二

就是图片的位置管理了，大致分为横向对齐和纵向对齐：
横向对齐：使用text-align 文本对齐标签，分为左中右三种，不同于简单的文本对齐，图片的水平对齐通常不能直接设置图片的text-align属性，而是通过设置其父元素的该属性来实现的：

            

纵向对齐：主要体现在与文字的搭配方面，使用vertical_align属性来实现图片与文字的相对位置（常用的三个上中下属性）：

              

从图中的实现效果我们可以发现只是进行了图片和文字的相对对齐，但图片在父集中的位置仍然没有改变，那此时如果我们既想要文字居图片中，又要图片居父集中，以哪种方式来实现呢，
最简单的方法就是对图片设置margin值：

             

但这种操作的弊端也是显而易见的，即文字并不会一直处在居中的位置随着图片移动，对于我们的要求并没有完美实现。

所以我通常会用另一种更粗暴的方式：给文字加span，为span设置行高，span的行高可以撑开图片与文字共同的高度，当行高大于图片高度时，就会将图片顶离父集上边线，实现相对的下移效果，这种情况下父集的高度设置为auto会呈现出更好的效果：

上面的效果图中为了表达的更明确并没有设置父集高度auto，在自己写代码时可以看情况而定，图三可以展示出行高增大时图片被顶离上线的距离也在增大。
除了这种方法，还有一个有异曲同工之妙的做法：给图片和文字整体外加span，设置行高撑开父集，实现两者都居中：

                 

此时父集的高度可以与span的行高一致，也可设置为auto自动撑开。

目前静态相对简单的网页中会遇到的图片问题也就这么多了，再出现会再补充的。

学习愉快呦