手抄报 安全手抄报 手抄报内容 手抄报图片 英语手抄报 清明节手抄报 节约用水手抄报

Dreamweaver中图片超出边框怎么办

时间:2024-10-25 18:13:45

1、打开Dreamweaver软件,新建html文档

Dreamweaver中图片超出边框怎么办

2、建立html文件后,ctrl+s保存到固定位置

Dreamweaver中图片超出边框怎么办

3、在body中建立div标签,添加style标签,在style标签中输入代码添加对div的修饰,如图,建立一个200*200像素大小的正方形,为了方便观看,设置2像素的红色边框,最后将div居中

Dreamweaver中图片超出边框怎么办
Dreamweaver中图片超出边框怎么办

4、在div中添加图片img标签,将准备好的图片置入,如图所示,图片的额本身大小超过200*200像素,所以讲图片置入后,图片会超出计算值。

Dreamweaver中图片超出边框怎么办
Dreamweaver中图片超出边框怎么办

5、在style标签中,在div修饰中添加overflow:hidden;将多余部分隐藏后,只显示框的范围区域

Dreamweaver中图片超出边框怎么办
Dreamweaver中图片超出边框怎么办

6、为了保持图片的完整性,可以对img添加修饰,如下图所示,对img添加修饰 宽度设置为100%;因为图片是div内部的文件,是div的子集,所以设置宽度100%会跟随父集大小;只改变宽度,高度会跟随宽度等比例缩放,这样可以将图片完整的显示出来。如下图所示。

Dreamweaver中图片超出边框怎么办
Dreamweaver中图片超出边框怎么办
© 手抄报圈