右拍云 图片点击放大后出现布局混乱问题的详解 并小结backgroundimage和img的使用情况

在写右拍云的时候,因为没想太多,直接把img放在div里面进行布局

html代码如下

<div class="container"><img src="images/fengdahui_100.png" alt=""><img src="images/huangquanneng_100.png" alt=""><img src="images/lishengsheng_100.png" alt=""><img src="images/qiuruihen_100.png" alt=""><img src="images/whs_100.png" alt=""></div>

结果点击后出现了布局上的混乱

图片不能对齐,如果容器的宽度给了限定得话,最后一张照片点击放大后会被挤到第二行.

后来经过思考,突然明白图片应该用backgroundimg形式而不能用img形式

那这里,就来总结一下backgroundimg和img的适用情况

一 从解析先后顺序来看

    img属于HTML的标签,backgroundimg属于css里面,一个页面有HTML,css,js共同组成,按照浏览器解析机制,html优先解析,所以重要的元素,还是使用img的好. 如果仅仅是为了显示一张照片,就是用backgroundimage.

二 从我平常犯得错误来看

    img的alt属性有利于辅助阅读,如果图片较大,或者用户网速不给力得话,alt给出的文本提示还是必要的,

   下面说说img的缺点

     1,img的图片是通过src拿到的,如果HTML代码不允许修改的话,那怎么换图,这时候backgroundimage的优点就出来了.

     2 . 如果img显示区域的大小是是预留的,那么图片和预留空间必须一致,要不然图片的就不是等比例的压缩或者拉伸.这个右拍云,点击图片放大时,图片撑起空间,导致原有的布局被打乱,img是标签元素,是占空间的,

此外,我翻墙去歪果仁那里取经,也分享一下我取经的结果吧

何时使用CSS背景图像

1. 使用CSS背景图像如果图像是不是内容的一部分 。 - sanchothefat
2. 这样做时，使用CSS背景图像的图像替换文本的如。 段落/头。 - sanchothefat
3. 使用background-image ，如果你打算让人们打印您的网页 ，你不希望被默认包含的图像。 -JayTee
4. 使用background-image ，如果你需要提高下载时间，因为与CSS的精灵 。
5. 使用background-image是否需要对图像的仅一部分是可见的，如利用CSS子图形。
6. 使用background-image与background-size:cover ，以舒展的背景图像，以填补其整个窗口。

IMG的语用用途

1. 使用IMG如果你打算让人们打印您的网页 ，你想被默认包含在图像。 - JayTee
2. 使用IMG如果你依赖于浏览器缩放比例大小的文本渲染图像。
3. 使用IMG为IE6中多个叠加图像 。
4. 使用IMG与z-index ，以舒展的背景图像 ，以填补其整个窗口。 
   请注意，这已不再是CSS3背景大小真实的; 
5. 使用img而不是background-image可以大大提高在一个背景动画的性能