js+css完美控制未知尺寸图片大小

最新推荐文章于 2020-04-19 11:23:00 发布

陌上风情

最新推荐文章于 2020-04-19 11:23:00 发布

阅读量1.6k

点赞数 1

分类专栏： Javascript Html与Css 文章标签： css border xhtml image javascript class

本文链接：https://blog.csdn.net/liuyong0818/article/details/4446768

版权

Javascript 同时被 2 个专栏收录

14 篇文章 0 订阅

订阅专栏

Html与Css

13 篇文章 0 订阅

订阅专栏

在做网站的时候，往往图片的处理很重要，固定尺寸容易变形拉伸，不固定又会有不可预知的问题，有可能撑开页面。使用js和css讲图片的现实控制在固定的区域内，大于这个区域的等比例缩放，小于这个区域的居中显示。

看看代码：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>css+js完美控制图片大小</title> <script type="text/javascript" language="JavaScript">  </script> <style type="text/css">  </style> </head> <body> <ul class="jobGroup"> <li><a href="../group/index.php?group_id=10011"><div class="group_head"><p><img width="400" height="400" src="http://www.baidu.com/img/baidu_logo.gif" οnlοad="DrawImage(this);"/></p></div></a> </li> </ul> </body> </html>

陌上风情

关注

1
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
js+css完美控制未知尺寸图片大小

在做网站的时候，往往图片的处理很重要，固定尺寸容易变形拉伸，不固定又会有不可预知的问题，有可能撑开页面。使用js和css讲图片的现实控制在固定的区域内，大于这个区域的等比例缩放，小于这个区域的居中显示。看看代码：css+js完美控制图片大小 <!-- var flag=false; function DrawImage(ImgD){ var imag
复制链接

扫一扫

专栏目录