img图片自适应宽和高[转]
控制缩略图常见的是JS来控制,还有就是最直接的方法定义img的宽高;
下面两种方法自适应宽和高,zhenzhai推荐使用CSS方法;
一、CSS方法;
主
要是在CSS设置最小值和最大值(max-width: 100px; max-
height: 100px; width: expression(this.width >100 && this.height < this.width ? 100: true); height: expression(this.height > 100 ? 100: true);)
<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<style type="text/css">
a img {
border: 0;
} .imgthumblist {
margin: 0 3px;
padding: 0;
list-style: none;
} .imgthumblist li {
float: left;
display: inline;
text-align: center;
background: #F0F9FF;
width: 108px;
height: 163px;
width: 100px;
height: 155px;
overflow: hidden;
border: 1px solid #B9D0ED;
padding: 3px;
margin: 3px;
} .imgthumblist li.list1line {
height: 123px;
height: 115px;
} .imgthumblist li.list2line {
height: 143px;
height: 135px;
} .contentL .imgthumblist li {
margin: 0 1px 3px;
} .imgthumblist p {
margin: 0;
line-height: 18px;
font-size: 12px;
} .imgthumblist div {
line-height: 90px;
font-size: 90px;
height: 100px;
display: table;
} .imgthumblist div a {
display: table-cell !important;
display: block;
width: 100px;
vertical-align: middle;
} .imgthumblist div img {
vertical-align: middle;
max-width: 100px;
max-height: 100px;
width: expression(this.width >100 && this.height < this.width ? 100: true);
height: expression(this.height > 100 ? 100: true);
font-size: 10px;
} @media all and (min-width: 0px) {
.imgthumblist div img {
width: 100px;
height: 100px;
}
}
/*for Opera Only*/
</style>
</head>
<body>
<div>
<ul class="imgthumblist">
<li class="list2line">
<div><a href="http://www.liaozhenxin.com/blog/article.asp?id=155" title="图片名称"><img src="http://www.liaozhenxin.com/blog/attachments/month_0612/3200612221928.jpg" alt="图片名称" /></a></div>
<p><a href="http://www.liaozhenxin.com/blog/article.asp?id=155">图片名称</a></p>
<p class="smalltxt">图片数:1</p>
</li>
<li class="list2line">
<div><a href="http://www.liaozhenxin.com/blog/article.asp?id=155" title="图片名称"><img src="http://www.liaozhenxin.com/blog/attachments/month_0612/p20061222185348.jpg" alt="图片名称" /></a></div>
<p><a href="http://www.liaozhenxin.com/blog/article.asp?id=155">图片名称</a></p>
<p class="smalltxt">图片数:3</p>
</li>
<li class="list2line">
<div><a href="http://www.liaozhenxin.com/blog/article.asp?id=155" title="图片名称"><img src="http://www.liaozhenxin.com/blog/attachments/month_0612/v2006122219452.jpg" alt="特别的爱给特" /></a></div>
<p><a href="http://www.liaozhenxin.com/blog/article.asp?id=155">图片名称</a></p>
<p class="smalltxt">图片数:4</p>
</li>
</ul>
</div>
</body>
</html>
html
二、JS方法
我就不说了代码写的很清楚
<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script type="text/javascript">
//改变透明度参数:图片对象,透明度:1-100的值
function setAlpha(imgObj, opacityValue) {
imgObj.filters.alpha.opacity = parseInt(opacityValue);
} //图片的显示大小[以宽度来限制]
function DrawImageW(imgObj, widthValue) {
var image = new Image();
image.src = imgObj.src;
if (image.width > 0 && image.height > 0) {
if (image.width >= widthValue) {
imgObj.width = widthValue;
imgObj.height = (image.height * widthValue) / image.width;
} else {
imgObj.width = image.width;
imgObj.height = image.height;
}
}
} //图片的显示大小[以高度来限制]
function DrawImageH(imgObj, heightValue) {
var image = new Image();
image.src = imgObj.src;
if (image.width > 0 && image.height > 0) {
if (image.height >= heightValue) {
imgObj.height = heightValue;
imgObj.width = (image.width * heightValue) / image.height;
} else {
imgObj.width = image.width;
imgObj.height = image.height;
}
}
}
//图片的显示大小[宽高同时限制]
function DrawImage(imgObj, widthValue, heightValue) {
var image = new Image();
image.src = imgObj.src;
if (image.width > 0 && image.height > 0) {
if (image.height > heightValue || image.width > widthValue) {
var h = 0, w, wflg = false;
if (image.height > heightValue)
wflg = true;
if (wflg) {
w = widthValue;
h = (image.height * widthValue) / image.width;
}
if (h == 0 || h > heightValue) {
h = heightValue;
w = (image.width * heightValue) / image.height;
}
//alert(w)
//alert(h)
imgObj.width = w;
imgObj.height = h;
} else {
imgObj.width = image.width;
imgObj.height = image.height;
}
}
} function zoomImg(imgObj) {
var zoom = parseInt(imgObj.style.zoom, 10) || 100; zoom += event.wheelDelta / 12; if (zoom > 0) imgObj.style.zoom = zoom + '%';
return false;
} </script>
</head>
<body>
<img src="http://www.liaozhenxin.com/blog/attachments/month_0612/3200612221928.jpg" onload="javascript:DrawImageW(this,100);" style="filter:alpha(opacity=60)" onmouseover="setAlpha(this,100)" onmouseout="setAlpha(this,60)" title="修改透明度" /> <img src="http://www.liaozhenxin.com/blog/attachments/month_0612/3200612221928.jpg" onload="javascript:DrawImageW(this,100)" title="宽在100以内" /> <img src="http://www.liaozhenxin.com/blog/attachments/month_0612/3200612221928.jpg" onload="javascript:DrawImageH(this,100)" title="高在100以内" /> <img src="http://www.liaozhenxin.com/blog/attachments/month_0612/3200612221928.jpg" onload="javascript:DrawImage(this,100,100)" title="宽高在100以内" /><br /> <img src="http://www.liaozhenxin.com/blog/attachments/month_0612/p20061222185348.jpg" onload="javascript:DrawImageW(this,100)" title="宽在100以内" /> <img src="http://www.liaozhenxin.com/blog/attachments/month_0612/p20061222185348.jpg" onload="javascript:DrawImageH(this,100)" title="高在100以内" /> <img src="http://www.liaozhenxin.com/blog/attachments/month_0612/p20061222185348.jpg" onload="javascript:DrawImage(this,100,100)" title="宽高在100以内" /><br /> <img src="http://www.liaozhenxin.com/blog/attachments/month_0612/v2006122219452.jpg" onload="javascript:DrawImageW(this,100)" title="宽在100以内" /> <img src="http://www.liaozhenxin.com/blog/attachments/month_0612/v2006122219452.jpg" onload="javascript:DrawImageW(this,100)" title="高在100以内" /> <img src="http://www.liaozhenxin.com/blog/attachments/month_0612/v2006122219452.jpg" onload="javascript:DrawImage(this,100,100)" onmousewheel="return zoomImg(this)" title="放大缩小" />
</body>
</html>
javascript
来自:http://www.cnblogs.com/MaxIE/archive/2007/01/30/634579.html
img图片自适应宽和高[转]的更多相关文章
- Android中获取图片的宽和高
在Android中,我们想获取图片的宽和高应该怎么办?一.正常加载图片的方法下获取宽和高 举一个简单的例子:创建一个图片的副本 //加载原图 Bitmap bmSrc = BitmapFactory. ...
- js和php计算图片自适应宽高算法实现
js Code: <script> $width = $(imgobj).width(); //图原始宽 $newheight = $(imgobj).height(); //图原始高 $ ...
- css 图片等宽等高
html <div class="autoimg"> <img src="xxx.jpg" /> </div> css .a ...
- requests获取图片的宽和高
try: if cover: resp = requests.get('%s?x-oss-process=image/info' % (url), timeout=30) if resp.status ...
- iview Carousel 轮播图自适应宽高;iview 轮播图 图片重叠问题;iview tabs 高度互相影响问题;vue this问题;
最终效果图: 一.轮播图中图片自适应宽高: <Carousel loop v-bind:height="imgHeight+'px'" v-model="caro ...
- elementui 走马灯图片自适应
点击单元格后弹出对话框轮播图片,用Carousel 走马灯实现. 希望图片无论分辨率多少,都能在一屏内显示,这时就要用图片自适应. 图片外层容器,使用 flex 布局,设置对齐方式为主轴.交叉轴居中 ...
- C# 上传图片前判断上传图片的宽和高
网上找了好久没有找到... 最后百度到了这句话“由上传的HttpPostFile的InputStream创建一个Image对象,然后想怎么处置就随便你了”. HTML代码: <asp:FileU ...
- JS获取图片实际宽高及根据图片大小进行自适应
JS获取图片实际宽高,以及根据图片大小进行自适应 <img src="http://xxx.jpg" id="imgs" onload="ad ...
- JS获取图片实际宽高
JS获取图片实际宽高,以及根据图片大小进行自适应 <img src="http://xxx.jpg" id="imgs" onload="ada ...
随机推荐
- An easier way to debug windows services
Have you got tired of attaching the Visual Studio debugger to the service application? I got the sol ...
- 让两个DIV的高度隐式同步
以前遇到两个相临近的块,高度要一样,但是内容多少又不定时,我都是通过把这两块封装在TD里面实现,但今天在CSDN上面看到有人要通过JS来实现这个,我尝试了一下.http://topic.csdn.ne ...
- 转载|23个Python爬虫开源项目代码:爬取微信、淘宝、豆瓣、知乎、微博等
地址:https://ask.julyedu.com/article/323
- ORA-01843: 无效的月份,执行sql语句更改为美国语言后仍然失败的解决办法
ORA-01843: 无效的月份失败的 sql 为:XXXXXXXXXXXXXXXX 执行sql语句更改为美国语言后仍然失败, ALTER SESSION SET NLS_DATE_LANGUAGE= ...
- IOS学习笔记45--UITableView性能优化
说实话,面试的时候已经被问到几次这个问题,然后就搜索了一下,看到了这篇优化文章,感觉不错,转来日后作为一种UITableView优化的方法. 使用不透明视图. 不透明的视图可以极大地提高渲染 ...
- poj 2391 (Floyd+最大流+二分)
题意:有n块草地,一些奶牛在草地上吃草,草地间有m条路,一些草地上有避雨点,每个避雨点能容纳的奶牛是有限的,给出通过每条路的时间,问最少需要多少时间能让所有奶牛进入一个避雨点. 两个避雨点间可以相互到 ...
- 4、Android Activity的生命周期 Activity的生命周期
watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQveXV4aWt1b18x/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA ...
- html 语义化标签拾遗
1.del和ins标签 兼容性:浏览器全部支持 del:定义文档中已被删除的文本. ins:定义已经被插入文档中的文本. <!DOCTYPE html> <html lang=&qu ...
- windows命令行设置IP与DNS
用dos命令修改IP等本地连接属性 平时我们改IP通常都在是窗口界面本地连接直接修改, 那在命令行也可以设置IP地址?当然可以,这里要用到netsh命令 .点击“开始”->“运行”,输入“cmd ...
- linux 服务器删除大文件之后不释放存储空间的解决办法
查看磁盘空间使用情况:df -h 查看根目录下,第一层目录所占空间情况:du -h --max-depth=1 / 找出根目录下大于2000M的文件:find / -size +2000M 找出已删除 ...