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

J'ai un problème, je veux régler la hauteur et la largeur de l'image à l'intérieur de la div à l'aide de 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');
    }

}

Des idées?

InformationsquelleAutor ravidev | 2011-10-21

2

Attributs sont différents de style. Dire votre image actuelle de la balise 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 retirez 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 êtes en train d'ajouter dans la largeur, mais c'est le style CSS et pas l'attribut. Essayez plutôt ceci:
```
$('div.myGallery > img').attr('width', '440');
```
InformationsquelleAutor Matt Bradley

C'est une fonction pour ajuster 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
        });

    }

}

InformationsquelleAutor Fuzzy Logic

Essayez ceci:

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

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

InformationsquelleAutor Rohit

0

Vous cherchez à être le réglage de la largeur de l'image plus grande que la div contenant, qui pourrait être le problème?

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

InformationsquelleAutor Last Rose Studios

Cela pourrait peut-être aider:

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

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

InformationsquelleAutor Rohit

Vous devez vous connecter pour publier un commentaire.