Définir la hauteur et la largeur de l'image à l'intérieur div en utilisant javascript et jquery

Question

J'ai un problème si je veux définir la hauteur et la largeur de l'image à l'intérieur de la div en utilisant uniquement Javascript et JQuery.

Voici mon code:

<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'); 
    } 

} 

Toutes les idées?

Answer 1

Les attributs sont différents du style. Supposons que votre balise image actuelle ressemble à ceci:

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

Après $('div.myGallery > img').removeAttr('width'), il ressemblera à ceci:

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

Vous supprimez la largeur attribut. Maintenant, après $('div.myGallery > img').css('width', '440px'), ça va ressembler à ceci:

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

Vous ajoutez de la largeur, mais il est le style CSS et non l'attribut. Essayez ceci à la place:

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

Answer 2

Vous cherchez à définir une largeur d'image plus grande que la div contenant, cela pourrait-il être le problème?

Yo enlever la hauteur et la largeur removeAttr fonctionnerait si elle a été définie dans la balise d'image <img src="puppies.jpg" width="100" height="100">, sinon, de le changer dans le css, je mettrais width et height = auto, ou si vous voulez que le conteneur pour déterminer la taille essayer quelque chose comme width:100% height:auto. Pour ajouter de la hauteur et de la largeur, votre .css('width','440px') devrait fonctionner. Cependant, comme mentionné, div contenant est plus petit.

Answer 3

Essayez ceci:

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

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

Answer 4

Peut-être que cela pourrait aider:

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

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

Answer 5

Cette fonction permet d'adapter une image à 586x586 balise 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 
     }); 

    } 

}