Rumah > hujung hadapan web > tutorial js > 纯js实现div内图片自适应大小(已测试,兼容火狐)_javascript技巧

纯js实现div内图片自适应大小(已测试,兼容火狐)_javascript技巧

WBOY
Lepaskan: 2016-05-16 16:44:23
asal
1223 orang telah melayarinya

这代码实现的功能就是平常我们遇到的一个div里面包含img的时候,在img图片大小未知,div大小未知的情况下,让图片自适应大小,对于图片本身小于div容器大小时,不作处理。因为如果拉伸,图片可能就失真了。

废话不多说,直接上代码,已测试,兼容火狐,谷歌,IE6,IE7/8

以下是js代码:

复制代码 代码如下:



以下是html代码:
复制代码 代码如下:

纯js实现div内图片自适应大小(已测试,兼容火狐)_javascript技巧


以下是css代码:
复制代码 代码如下:

.sy_pic{ width:200px; height:300px; border:#000 solid 5px; text-align:center;}

自己换下图片地址使用。有问题或者指教请加QQ群:255708401。
Label berkaitan:
sumber:php.cn
Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Tutorial Popular
Lagi>
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan