发新贴  快速回复

图片等比例缩放

  创美易-miaov
2013-08-06 09:58
 本帖最后由 创美易-miaov 于 2016-6-28 21:24 编辑 

已经解决
无为
只改变宽或者只改变高,图片就会等比缩放。

改变图片宽高用 obj.width obj.height ,不要使用obj.style.width / obj.style.height
2013-08-06 10:40  回复本帖
 
创美易-miaov
无为 发表于 2013-8-6 10:40 forum.php?mod=redirect&goto=findpost&pid=20760&ptid=7025
只改变宽或者只改变高,图片就会等比缩放。

改变图片宽高用 obj.width obj.height ,不要使用obj.style.wid ...

怎么算它们的,打开图片很大。
[html]<!DOCTYPE html>
<html>
<head>
    <meta charset=utf-8 />
    <title>JS Bin</title>
    <style>
        .div{
            overflow:hidden;
            background:#1d7fb5;
            float:left;
            margin:10px;
           padding:0;
           margin:0;
        }
        .div1{
            width:500px;
            height:200px;
        }
        .div2{
            width:200px;
            height:400px;
        }
        .div2{
            width:150px;
            height:500px;
        }

    </style>
    <script type="text/javascript">

        var AutoImg=document.getElementsByTagName('img');
        var oDiv=document.getElementsByTagName('div');

        function AutoSizeImage(obj,aWidth)
        {
            var myimg = new Image();
            myimg.src=obj.src;
            var oWidth=myimg.offsetWidth;
            var nWidth=obj.width;

        }

    </script>
</head>
<body>
   <div class="div1"><img src="http://bbs.miaov.com/data/attachment/forum/201304/11/135018sfcdw1a11d15st8t.jpg"></div>
   <div class="div2"><img src="http://bbs.miaov.com/data/attachment/forum/201304/11/140447syozpp5ootyhja4s.jpg"></div>
   <div class="div3"><img src="http://bbs.miaov.com/data/attachment/forum/201304/11/1350087cyvwrr2bfst1bc4.jpg"></div>
</body>
</html>[/html]<!DOCTYPE html>
<html>
<head>
    <meta charset=utf-8 />
    <title>JS Bin</title>
    <style>
        .div{
            overflow:hidden;
            background:#1d7fb5;
            float:left;
            margin:10px;
           padding:0;
           margin:0;
        }
        .div1{
            width:500px;
            height:200px;
        }
        .div2{
            width:200px;
            height:400px;
        }
        .div2{
            width:150px;
            height:500px;
        }

    </style>
    <script type="text/javascript">

        var AutoImg=document.getElementsByTagName('img');
        var oDiv=document.getElementsByTagName('div');

        function AutoSizeImage(obj,aWidth)
        {
            var myimg = new Image();
            myimg.src=obj.src;
            var oWidth=myimg.offsetWidth;
            var nWidth=obj.width;

        }

    </script>
</head>
<body>
   <div class="div1"><img src="http://bbs.miaov.com/data/attachment/forum/201304/11/135018sfcdw1a11d15st8t.jpg"></div>
   <div class="div2"><img src="http://bbs.miaov.com/data/attachment/forum/201304/11/140447syozpp5ootyhja4s.jpg"></div>
   <div class="div3"><img src="http://bbs.miaov.com/data/attachment/forum/201304/11/1350087cyvwrr2bfst1bc4.jpg"></div>
</body>
</html>
2013-08-06 12:04  回复本帖
 
zmouse
设定一个宽高最大取值,然后看下实际取值和设定的最大取值的比例关系.
如果宽和高有一个比设定值的宽高要大, 那就看下他们谁的缩放系数大,就按谁的来算
2013-08-06 16:07  回复本帖
 
创美易-miaov
 本帖最后由 创美易-miaov 于 2013-8-6 17:51 编辑 

zmouse 发表于 2013-8-6 16:07 forum.php?mod=redirect&goto=findpost&pid=20771&ptid=7025
设定一个宽高最大取值,然后看下实际取值和设定的最大取值的比例关系.
如果宽和高有一个比设定值的宽高要大, ...

直接模拟网上的,但是网上的那些很不科学。
写不出。。。唉唉唉~~~
[html]<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>JS Bin</title>
<style>
div{ 
background:#1d7fb5;
float:left;
margin:10px;
overflow:hidden;
}
.div1{
width:250px;    
height:105px;
}
.div2{
width:160px;
height:90px;
}
.div3{
width:250px;
height:85px;
}
 </style>
<script type="text/javascript">
function AutoResizeImage(maxWidth,maxHeight,objImg){
var img = new Image();
img.src = objImg.src;
var hRatio;
var wRatio;
var Ratio=1;
var w=img.width;
var h=img.height;
wRatio = maxWidth/w;
hRatio = maxHeight/h;
if (maxWidth ==0 && maxHeight==0){
Ratio = 1;
}else if (maxWidth==0){
if (hRatio<1) Ratio = hRatio;
}else if (maxHeight==0){
if (wRatio<1) Ratio = wRatio;
}else if (wRatio<1 || hRatio<1){
Ratio = (wRatio<=hRatio?wRatio:hRatio);
}
if (Ratio<1){
w = w * Ratio;
h = h * Ratio;
}
objImg.height = h;
objImg.width = w;
}
window.err=function(){
var aImg=document.getElementsByTagName('img');
  
for(var i=0;i<aImg.length;i++){
  
aImg[i].err=AutoResizeImage(300,300,aImg[i]);
}
}

</script>
</head>
<body>
<div class="div1"><img src="http://img5.131.com/www/500/2013/08/01/201308011016295f6.jpg" ></div>
<div class="div2"><img src="http://img5.131.com/www/500/2013/07/17/20130717095702b71.jpg" ></div>
<div class="div3"><img src="http://img5.131.com/www/500/2013/07/26/20130726105729155.jpg" ></div>
</body>
</html>[/html]<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>JS Bin</title>
<style>
div{ 
background:#1d7fb5;
float:left;
margin:10px;
overflow:hidden;
}
.div1{
width:250px;    
height:105px;
}
.div2{
width:160px;
height:90px;
}
.div3{
width:250px;
height:85px;
}
 </style>
<script type="text/javascript">
function AutoResizeImage(maxWidth,maxHeight,objImg){
var img = new Image();
img.src = objImg.src;
var hRatio;
var wRatio;
var Ratio=1;
var w=img.width;
var h=img.height;
wRatio = maxWidth/w;
hRatio = maxHeight/h;
if (maxWidth ==0 && maxHeight==0){
Ratio = 1;
}else if (maxWidth==0){
if (hRatio<1) Ratio = hRatio;
}else if (maxHeight==0){
if (wRatio<1) Ratio = wRatio;
}else if (wRatio<1 || hRatio<1){
Ratio = (wRatio<=hRatio?wRatio:hRatio);
}
if (Ratio<1){
w = w * Ratio;
h = h * Ratio;
}
objImg.height = h;
objImg.width = w;
}
window.err=function(){
var aImg=document.getElementsByTagName('img');
  
for(var i=0;i<aImg.length;i++){
  
aImg[i].err=AutoResizeImage(300,300,aImg[i]);
}
}

</script>
</head>
<body>
<div class="div1"><img src="http://img5.131.com/www/500/2013/08/01/201308011016295f6.jpg" ></div>
<div class="div2"><img src="http://img5.131.com/www/500/2013/07/17/20130717095702b71.jpg" ></div>
<div class="div3"><img src="http://img5.131.com/www/500/2013/07/26/20130726105729155.jpg" ></div>
</body>
</html>
2013-08-06 17:24  回复本帖
 
创美易-miaov
唉唉~~( ⊙ o ⊙ )O(∩_∩)O!人呢,等待刘老师分析解答。 
2013-08-06 20:33  回复本帖
 
创美易-miaov
刘伟老师呢???
2013-08-07 20:54  回复本帖
 
创美易-miaov
老师人呢?{:soso_e149:}
2013-08-08 16:57  回复本帖
无为
首先你小图的布局大小是固定的,所以明显是做不了等比缩放的。

不知道你想要的等比缩放是什么意思。

这里给一个例子你参考一下,临时写的,功能没有写全:

[html]<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>JS Bin</title>
<style>
div{ 
background:#1d7fb5;
float:left;
margin:10px;
overflow:hidden;
}
.div1{
width:250px;    
height:105px;
}
.div2{
width:160px;
height:90px;
}
.div3{
width:250px;
height:85px;
}
</style>
<script type="text/javascript">

window.err=function(){

var aImg=document.getElementsByTagName('img');
  
for(var i=0;i<aImg.length;i++){
imgSet(aImg[i]);
}

}

function imgSet(obj){

var oImg = new Image();

oImg.onload = function(){

obj.w = oImg.width;
obj.h = oImg.height;

obj.style.width = obj.parentNode.offsetWidth + 'px';
obj.style.height = obj.parentNode.offsetHeight + 'px';
obj.src = oImg.src;

obj.onclick = function(){

imgPop(this);

};

};

oImg.src = obj.getAttribute('_src');

}

function imgPop(obj){

var oImg = document.createElement('img');

oImg.src = obj.src;
oImg.width = obj.w;
oImg.height = obj.h;

oImg.style.position = 'absolute';
oImg.style.left = '50%';
oImg.style.top = '50%';
oImg.style.margin = -obj.h/2 + 'px 0 0 ' + -obj.w/2 + 'px';

document.body.appendChild(oImg);

}

</script>
</head>
<body>
<div class="div1"><img src="http://bbs.miaov.com/ucenter/avatar.php?uid=1257&size=small" _src="http://img5.131.com/www/500/2013/08/01/201308011016295f6.jpg" ></div>
<div class="div2"><img src="http://bbs.miaov.com/ucenter/avatar.php?uid=1257&size=small" _src="http://img5.131.com/www/500/2013/07/17/20130717095702b71.jpg" ></div>
<div class="div3"><img src="http://bbs.miaov.com/ucenter/avatar.php?uid=1257&size=small" _src="http://img5.131.com/www/500/2013/07/26/20130726105729155.jpg" ></div>
</body>
</html>[/html]
2013-08-09 12:06  回复本帖
 
创美易-miaov
 本帖最后由 创美易-miaov 于 2013-8-9 13:58 编辑 

无为 发表于 2013-8-9 12:06 forum.php?mod=redirect&goto=findpost&pid=20807&ptid=7025
首先你小图的布局大小是固定的,所以明显是做不了等比缩放的。

不知道你想要的等比缩放是什么意思。


本来是要做宽度不固定的瀑布流,那种效果我写不出来,杜鹏老师写那个是全部是写在js里面的。
你写的那个imgSet()貌似没起什么作用,和css强制图片大小一个样。
2013-08-09 13:36  回复本帖
无为
创美易-miaov 发表于 2013-8-9 13:36 forum.php?mod=redirect&goto=findpost&pid=20810&ptid=7025
本来是要做宽度不固定的瀑布流,那种效果我写不出来,杜鹏老师写那个是全部是写在js里面的。
你写的那个i ...

imgSet()是为了把图片的原始宽高先取出来存到自定义属性中,这样在点击图片的时候才能显示原图大小。 

你显然没有认真分析上面的代码。
2013-08-09 15:21  回复本帖
 
创美易-miaov
无为 发表于 2013-8-9 15:21 forum.php?mod=redirect&goto=findpost&pid=20811&ptid=7025
imgSet()是为了把图片的原始宽高先取出来存到自定义属性中,这样在点击图片的时候才能显示原图大小。 

 ...

好吧,我错了{:soso_e149:} 。
无为老师,我真心看了,就是不知道为什么这么写
2013-08-09 17:08  回复本帖
无为
创美易-miaov 发表于 2013-8-9 17:08 forum.php?mod=redirect&goto=findpost&pid=20815&ptid=7025
好吧,我错了 。
无为老师,我真心看了,就是不知道为什么这么写 ...

那是为了在图片加载完成之后去取图片的宽度和高度,不然没办法得到图片的原始宽高。

就算你要做等比缩放,那也是在原大小的情况下做等比缩放。
2013-08-10 09:51  回复本帖
登录 后才可以发表回复