使用javascript和jquery設置div內部圖像的高度和寬度

我有一個問題，我想只使用Javascript和JQuery設置div內圖像的高度和寬度。使用javascript和jquery設置div內部圖像的高度和寬度

這裏是我的代碼：

<div class="myGallery"> 
    <img class="replaced" src="myimage.jpg" style="display: inline;"> 
</div> 

.myGallery { 
    display: table-cell; 
    height: 220px; 
    text-align: center !important; 
    vertical-align: middle !important; 
    width: 110px; 
} 

.myGallery img { 
    text-align: center; 
    vertical-align: middle; 
    width: auto !important; 
} 


function ChangeHW(hdnValue) 
{ 

    if (hdnValue==1) 
    { 
     //i want to remove height and width attribute of image 
      //this is working.. 
      $('div.myGallery > img').removeAttr('width'); 
      $('div.myGallery > img').removeAttr('height'); 
    } 
    else 
    { 
     //i want to set height and width attribute of image 
      //this is not working..i cant set width-height using this line od code 
      $('div.myGallery > img').css('width', '110px'); 
      $('div.myGallery > img').css('height', '220px'); 
    } 

}

任何想法？

來源

2011-10-21 ravidev

屬性與樣式不同。說你當前圖像標記看起來像這樣：

<img src="foo.png" width="200" height="200" />

$('div.myGallery > img').removeAttr('width')後，它看起來就像這樣：

<img src="foo.png" height="200" />

要刪除的寬度屬性。現在$('div.myGallery > img').css('width', '440px')後，它會是這樣的：

<img src="foo.png" height="200" style="width: 440px;" />

你在寬度增加，但它的CSS樣式，而不是屬性。試試這個：

$('div.myGallery > img').attr('width', '440');

來源

2011-10-21 05:12:22

.attr（）not working .. – ravidev

你看起來是設置圖像寬度大於包含div，這可能是問題嗎？

呦刪除高度和寬度，如果它是在圖像標籤<img src="puppies.jpg" width="100" height="100">設置removeAttr會的工作，否則，要改變它在CSS，我會成立width和height = auto，或者如果你想容器的大小來確定試像width:100% height:auto。要添加高度和寬度，您的.css('width','440px')應該可以工作。不過如前所述，包含div更小。

來源

2011-10-21 05:13:24

試試這個：

$('div.myGallery > img').css('width', '110px !important'); 

$('div.myGallery > img').css('height', '220px !important');

來源

2011-10-21 05:48:34 Rohit

也許這可以幫助：

.newCssClass { height : 110px !important; width : 440px !important; } 

$("div.myGallery img").addClass("newCssClass");

來源

2011-10-21 05:59:19 Rohit

這是適合的圖像586x586 div標籤的功能。

function img_fit(img_id){ 

    var img_width = $("#"+img_id).width(); 
    var img_height= $("#"+img_id).height(); 
    var max_side = Math.max(img_width, img_height); 
    var top = 0, left = 0, scale = 0; 
    var new_width, new_height,new_scale; 
    scale = (max_side == img_height)? img_height/586 : img_width/586; 

    if(max_side == img_height){ 
     new_width = img_width/scale; 
     new_height = 586; 
     top = 0; 
     left = Math.round((586 - new_width)/2); 
     $("#"+img_id).animate({ 
      'width':new_width, 
      'height':new_height, 
      'top':0, 
      'left':left, 
      'duration':300 
     }); 
     //$("#"+img_id).width(new_width); 
     //$("#"+img_id).height(586); 
     new_scale = 586*scale/img_height; 
    } 
    else{ 
     new_height = img_height/scale; 
     new_width = 586; 
     top = Math.round((586 - new_height)/2); 
     //top = 0; 
     left = 0; 
     $("#"+img_id).animate({ 
      'width':new_width, 
      'height':new_height, 
      'top':top, 
      'left':0, 
      'duration':300 
     }); 

    } 

}

來源

2012-08-25 14:58:00

使用javascript和jquery設置di​​v內部圖像的高度和寬度

回答

相關問題

使用javascript和jquery設置div內部圖像的高度和寬度