《小白H5成长之路17》终于可以说说网页中图片的事情了

bigegpt 2024-10-24 09:02 4 浏览

“小白，图片在网页里面的重要性不言而喻，今天咱聊聊最常见的图片吧！网页中插入图片使用img标签，img标签不是图片，它只是图片的占位容器，我们需要通过src属性告诉img容器图片的链接。”

“哦~那是不是通过jQuery改变img标签的src属性就可以实时改变一个img标签的图案？”

“嗯，说的不错，比如鼠标移到一个图片上后让图片变成另一个图，就可以通过jQuery更改img标签的src属性。这个我们一会说，先来看看img是个什么类型的容器吧！”

“可以看到图片和input文本框不是一种类型的容器，文本框是行内的块容器、图片是内联元素而之前说的div是块容器（block）。一般的inline元素是不能设定高度和宽度的，比如span标签，但是img标签是特列，要知道我们全靠高度宽度来控制图片的样式了。”

“好了，现在我们在div里面放一个图片看看效果吧！”

“现在我们做几个测试，看看只通过css更改图片的宽度（变成100px），高度会不会自动按比例变化。”

“没有问题，现在去掉图片的宽度限制，把父容器div的宽度改成200px看看。”

“天哪，图片从main容器里面出去了。怎么才能让图片跟着父容器一起变化呢？”，小白不解的问到。

“你把图片的宽度设定成百分比显示：width:100%;”

"果然好了，可是为什么图片跟父容器之间有间距呢？"

“小白啊！你没看到父容器css样式里面设定padding了么？所以父容器有内间距啊！”

小白又问道：“那怎么让图片基于父容器居中呢？”

“图片是一个内联元素，因此你只需要让父容器的text-align为center就可以了，这个css属性是控制文本居中的，在这里对图片也起作用，你可以试试让父容器宽度为800px，图片宽度为200px，然后把父容器css样式中增加一个text-align：center看看效果。”

“小白，真正布局的时候，图片牵扯到的问题比较多，我希望你能在现在的基础上把各种css样式（如：overflow、padding、margin等等）用一用，看看会碰到什么问题吧！”

“刚刚我们说过jQuery可以通过更改img的src属性来改变img标签的图片，你也可以做一个小练习：鼠标移动到图片上后换一个图片，并且让这个图片的边框为实线 5像素颜色为黑色，鼠标移出以后恢复之前的状态，（jQuery更改属性用attr方法，比如$("myimg").attr("src","图片的地址")就是更改src属性）。”

小白惊喜的说道：“正好可以用一用前两天你说的jQuery鼠标事件，还能用到jQuery动态更改css样式，一举两得，我现在就去练习”

想学H5的朋友可以关注老炉，您的关注是我持续更新《小白H5成长之路》的动力！

jquery鼠标移入移出