Home  >  Article  >  Web Front-end  >  纯js实现div内图片自适应大小(已测试,兼容火狐)_javascript技巧

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

WBOY
WBOYOriginal
2016-05-16 16:44:231157browse

这代码实现的功能就是平常我们遇到的一个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。
Statement:
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn