如何用DIV+CSS控制图片大小范围

在css中 , 将图片的宽度设置为100% , 然后控制div的大小范围便可实现控制图片的大小范围 。 下面小编举例讲解如何用DIV+CSS控制图片大小范围 。

如何用DIV+CSS控制图片大小范围

文章插图

需要这些哦
html+css
代码编纂器:Dreamweaver CS5
方式/
1新建一个html文件 , 定名为test.html , 用于讲解若何用DIV+CSS节制图片大小规模 。
如何用DIV+CSS控制图片大小范围

文章插图

2在test.html文件内 , 利用div标签建立一个模块 , 在div内 , 利用img标签建立一张图片 。

如何用DIV+CSS控制图片大小范围

文章插图

3在test.html文件内 , 设置div标签的id为kkk , 本家儿要用于下面设置其样式 。

如何用DIV+CSS控制图片大小范围

文章插图

4在test.html文件内 , 编写<style type="text/css"></style>标签 , 页面的css样式将写在该标签内 。
如何用DIV+CSS控制图片大小范围

文章插图

5在css标签内 , 经由过程id(kkk)设置div的样式 , 界说其宽度为200px , 同时设置div内的img图片的样式 , 利用width属性设置图片的宽度为100% 。

如何用DIV+CSS控制图片大小范围

文章插图

6在浏览器打开test.html文件 , 查看实现的结果 。
如何用DIV+CSS控制图片大小范围

文章插图

总结:11、建立一个test.html文件 。
2、在文件内 , 在div内 , 利用img建立一张图片 。
【如何用DIV+CSS控制图片大小范围】3、在css标签内 , 设置div的样式 , 界说其宽度为200px , 同时设置div内的img图片的样式 , 利用width属性设置图片的宽度为100% 。

注重事项改变div的width属性的大小规模 , 便可以改变img的大小规模 。

以上内容就是如何用DIV+CSS控制图片大小范围的内容啦 , 希望对你有所帮助哦!

    推荐阅读