图片根据div大小变化 怎么让div的大小随着背景图片的大小变大

在做网页的时候,经常会遇到为div添加背景图片,那么我们应该怎样做才能让div的大小随着背景图片的变大而变大呢,也就是让我们的div被背景图片所撑起来。下面小编告诉你!

让div的大小随着背景图片的大小变大的方法

首先,我们需要新建一个html页面,并在页面中写上一个div。并为div添加背景图片,为背景图片添加一些基本的样式。

然后,我们按下键盘上的F12,查看其在浏览器中的效果。效果肯定是页面中没有相应的背景图片,理由是我们做的是背景图片,无法将div撑起一定的高度。

既然不能撑起来,我们也不能单纯的为div设置高度,这样无法解决不同大小背景图片的问题,我们可以利用css中的伪元素::after或者::before

可以简单的解释一下,利用伪元素是将指定标签的前面或者后面的内容设为空,并设成块元素,并设定以百分比为单位的padding-bottom或者padding-top。以此撑开这个div。

另一种方法是,我们在有背景图片的div的内部再套一个div,然后为这个内部的div添加相应的样式,使得外层div可以被撑起来。

这里我采用的是和第一个相同的做法,为这个内部div设定内部边距上或者下都可以。同样是以百分比作为单位。这样我们再次在浏览器中查看,就可以看到作为背景的图片了。

最后告诉大家一些注意事项,不管我们采用方法一还是方法二,都是设置的上下的内边距而不是外边距,并且要以百分比作为单位。

图片根据div大小变化 怎么让div的大小随着背景图片的大小变大
  

爱华网本文地址 » http://www.aihuau.com/a/203561/183079467.html

更多阅读

怎样把图片变小 手机怎么让图片变小

当我们想将拍摄好的图片上传到网上,如一些需要图片验证的网站,会发现对于图片的大小都是有限制的。那如何把图片变小呢?这就需要使用图像处理软件把图片变小,以达到网站的标准。纵观网上那么多的图像处理软件,太专业的操作繁琐,太费时间,傻

宽能法师舍利子图片 舍利子是怎么形成的?

舍利是梵语?arīra的音译,是印度人死后身体的总称。在佛教中,僧人死后所遗留的头发、骨骼、骨灰等,均称为舍利;在火化后,所产生的结晶体,则称为舍利子或坚固子。舍利的结晶体舍利子,其形成原因,目前在实验研究方面没有定论。依据佛典,舍利

黑痣癌变的征兆图片 黑痣是怎么形成的

黑痣是怎么形成的――简介在医学上常见有色素痣,属于黑色索细胞系统的良性肿瘤90%以上的人身上可以寻到痣,只是大小、多少不同而已。良性肿瘤均有恶变的可能,痣也不例外,但是据统计这种可能性微乎其微,大约只有百万分之一的痣转变为瘤。如

怎么修改图片的大小kb 怎么设置图片大小

怎么设置图片大小――简介大家平时都会遇到需要修改图片大小的情况,下面小编就教大家怎么设置图片大小。怎么设置图片大小――工具/原料画图工具怎么设置图片大小――怎么设置图片大小怎么设置图片大小 1、平时大家想要设置图片大小

听话乖巧的作文 怎么让的贵宾犬变听话、乖巧

   贵宾犬  对于喜欢调皮捣蛋的宠物贵宾,总是让家长们头疼。它们总是自我感觉良好,不太在乎其它人的感受,对主人的话也是漠不关心。那么当贵宾犬不听话的时候,主人们应该如何应对呢?  1.对于在训练中注意力不集中、不听主

声明:《图片根据div大小变化 怎么让div的大小随着背景图片的大小变大》为网友份奢念丶分享!如侵犯到您的合法权益请联系我们删除