如何更改圖像的大小？

我試圖放大圖片，當用戶懸停到圖像和減少圖像的大小後，用戶鼠標圖像。如何更改圖像的大小？

我有以下代碼

$('#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

如何更改圖像的大小？

回答

相關問題