如何更改图像的大小？

我试图放大图片，当用户悬停到图像和减少图像的大小后，用户鼠标图像。如何更改图像的大小？

我有以下代码

$('#image_layout').on('hover','img',function(){ 
    $(this).css('width','110%'); 
}) 

$('#image_layout').on('mouseout','img',function(){ 
    $(this).css('width','90%'); 
})

我想从没有从图像的顶部lefe位置的图像的中心位置放大图像。

一个我：

----  ------ 
| | -> |  | 
----  |  | 
      ------

一个我想：（从图像的中心放大图片）

   ------ 
    ----  |  | 
    | | --> |  | 
    ----  |  | 
       ------

我不知道如何实现这一目标。有小费吗？非常感谢！

来源

2012-08-06 FlyingCat

使用CSS3过渡性质做 – gaspyr 2012-08-06 22:39:26

威尔较大的图像仍然适合一个更大的外部div或你想它突破包含div的界限？如果答案是将其保存在一个包含div中，那么你可以通过CSS垂直对齐它，如果答案突然出现，那么你需要调整较大图像的顶部。 – 2012-08-06 22:40:49

CSS3 + JavaScript方法：http://stackoverflow.com/questions/7085879/thumbnail-hover-zoom-enlarge-w-css3-and-javascript-z-axis-problem – 2012-08-06 22:43:04

你想达到什么并不像看起来那么容易。如果您想将原点保存在容器的中心，则需要将图像相对于容器绝对定位。试试这个lil'插件，它可能不适用于任何情况，但它值得一试。

$.fn.centerIt = function(){ 

    var height = this.outerHeight(), 
     width = this.outerWidth(); 

    this.css({ 
     position: 'absolute', 
     top: '50%', 
     left: '50%', 
     marginTop: -(height/2), 
     marginLeft: -(width/2) 
    }) 
    .parent() 
    .css('position', 'relative'); 

    return this;  
}; 

$('img').css('width', '90%').centerIt();

演示：http://jsfiddle.net/elclanrs/RMsSh/

来源

2012-08-06 22:45:13 elclanrs

在JQuery中更改图像大小非常简单。你可以利用这个或.CSS（）

$('#imageId').width(150).height(100);

来源

2012-08-06 22:39:16 Shenaniganz

我只是问，你是怎么做到的拿出229和72？大声笑 – Ohgodwhy 2012-08-06 22:39:57

我只是复制/粘贴我的项目，我正在:) – Shenaniganz 2012-08-06 22:41:23

当您更改width，你还没有定义height然而，浏览器会自动保持它们之间的比例CSS方法，所以height也将是110%和90%。

试试这个代码：

$('#image_layout').on('hover','img',function(){ 
    $(this).css('width','110%') 
     .css('height','100%') 
}); 
$('#image_layout').on('mouseout','img',function(){ 
    $(this).css('width','90%') 
     .css('height','100%'); 
});

来源

2012-08-06 22:40:32

你必须要做到这一点水平，垂直居中的图像。

来源

2012-08-06 22:44:18 Shomz

避免使用的JavaScript可以通过简单的CSS样式来处理任务，不要让JavaScript的重量你的页面沉重。

#image_layout 
{ 
    width : /* initial width value */ 
    height: /* initial height value */ 
} 


#image_layout : hover 
{ 
    width : /* new width value */ 
    height: /* new height value */ 
    /* use of multiple tranistions */ 
    transition : all 0.2s ease-out 
}

关于jQuery的方式，无需申请的.css（）两次，只是传递给它含有它们的值属性的对象：

$('#image_layout').on('mouseout','img',function(){ 
    $(this).css({'width':'90%', 'height':'100%'}); 
});

来源

2012-08-06 22:49:26 gaspyr

如何更改图像的大小？

回答

相关问题