javascript 实现图片自动适应DIV的大小并进行拉伸,使图片不重复显示

JavaScript012

javascript 实现图片自动适应DIV的大小并进行拉伸,使图片不重复显示,第1张

楼主,这个我接触多了你试试我的.可以的话求采纳。

css:

.div1{width:100px}//这个随意设置

.div1 img{width:100%}

html:

<div class="div1"><img src="我的图片" /></div>

接到了一个开发任务,需要能够拉伸缩放图片,以及图片上缩放边框。

简单来说,就是个宽度不超过范围,高度自由拉伸图片的效果,以及一个有底图,宽高都要在操作对象内的缩放。

具体的处理细节,将上传到我的zjj-components中。组件名为PictureResize

如果您觉得我的文章有用,欢迎点赞和关注,也欢迎光临我的个人博客 https://github.com/BokFangcanvas元素可以用来画2D图形,我们通过写js来完成任务。 首先,我们在html文件中写入: 然后在css中给canvas一个背景颜色: 此时浏览器中是这样的: 正如我们所看到的,canvas的默认值是宽300高150。我想把画布变为正方形,所以在css中加入width:300pxheight:300px。接着我们在上面画圆。 却发现圆被拉伸为椭圆了。 canvas是由一张画板和一张画纸铺成的,画板相当于一个容器,我们在画纸上作画。当画纸与画板宽高不相等时,图形就会被拉伸。 1.在html标签中设置canvas属性: 2.在js中设置: