在写右拍云的时候,因为没想太多,直接把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背景图像
- 使用CSS背景图像如果图像是不是内容的一部分 。 - sanchothefat
- 这样做时,使用CSS背景图像的图像替换文本的如。 段落/头。 - sanchothefat
- 使用
background-image
,如果你打算让人们打印您的网页 ,你不希望被默认包含的图像。 -JayTee - 使用
background-image
,如果你需要提高下载时间,因为与CSS的精灵 。 - 使用
background-image
是否需要对图像的仅一部分是可见的,如利用CSS子图形。 - 使用
background-image
与background-size:cover
,以舒展的背景图像,以填补其整个窗口。
IMG的语用用途
- 使用
IMG
如果你打算让人们打印您的网页 ,你想被默认包含在图像。 - JayTee - 使用
IMG
如果你依赖于浏览器缩放比例大小的文本渲染图像。 - 使用
IMG
为IE6中多个叠加图像 。 使用IMG
与z-index
,以舒展的背景图像 ,以填补其整个窗口。
请注意,这已不再是CSS3背景大小真实的;- 使用
img
而不是background-image
可以大大提高在一个背景动画的性能