jquery change la taille de l'image

jQuery est une bibliothèque JavaScript qui simplifie la traversée et la manipulation des documents HTML, tout en fournissant des effets et des fonctions interactifs couramment utilisés pour le traitement des données. En développement web, il est souvent nécessaire d’utiliser jQuery pour modifier la taille des images. Plusieurs méthodes couramment utilisées seront présentées ci-dessous.

1. Utilisez les styles CSS pour modifier la taille de l'image

Ajoutez une balise img dans le fichier HTML et ajoutez-y l'attribut class :

<img src="image.jpg" class="image">

Ensuite, dans le fichier CSS, utilisez les attributs width et height pour modifier la taille de l'image. :

.image {
  width: 50%;
  height: auto;
}

De cette façon, la largeur de l'image sera fixée à 50% de la largeur de son élément parent, et la hauteur s'ajustera automatiquement en fonction des proportions. Si vous souhaitez définir une largeur et une hauteur fixes, vous pouvez définir l'attribut height sur une valeur spécifique :

.image {
  width: 200px;
  height: 100px;
}

2. Utilisez la méthode CSS de jQuery pour modifier la taille de l'image

La méthode CSS de jQuery peut définir les propriétés CSS sur les éléments DOM.

Tout d'abord, ajoutez une balise img dans le fichier HTML et ajoutez-y l'attribut id :

<img src="image.jpg" id="my-image">

Utilisez ensuite la méthode CSS de jQuery pour modifier la taille de l'image :

$(document).ready(function() {
  $("#my-image").css("width", "50%");
});

De cette façon, la largeur de l'image sera définie sur 50 de la largeur de son élément parent %. Si vous souhaitez modifier la largeur et la hauteur en même temps, vous pouvez utiliser le littéral d'objet :

$(document).ready(function() {
  $("#my-image").css({
    "width": "200px",
    "height": "100px"
  });
});

3. Utilisez la méthode attr de jQuery pour modifier la taille de l'image

La taille de l'image peut être définie via la largeur et la hauteur attributs. Utilisez la méthode attr de jQuery pour modifier les attributs de la balise img.

$(document).ready(function() {
  $("#my-image").attr({
    "width": "50%",
    "height": "auto"
  });
});

De cette façon, la largeur de l'image sera fixée à 50% de la largeur de son élément parent, et la hauteur s'ajustera automatiquement en fonction de la proportion.

4. Créer un nouvel élément img

À l'aide de jQuery, vous pouvez créer et insérer un nouvel élément img, puis modifier la taille de l'image en définissant ses propriétés.

Tout d'abord, créez un élément conteneur dans le fichier HTML :

<div id="image-container"></div>

Utilisez ensuite jQuery pour créer un nouvel élément img et insérez-le dans l'élément conteneur :

$(document).ready(function() {
  var img = $("<img>");
  img.attr("src", "image.jpg");
  $("#image-container").append(img);
});

Enfin, utilisez les méthodes CSS ou attr pour modifier la taille de l'image :

$(document).ready(function() {
  var img = $("<img>");
  img.attr("src", "image.jpg");
  img.css({
    "width": "200px",
    "height": "100px"
  });
  $("#image-container").append(img);
});

Résumé :

Grâce à CSS, à la méthode CSS de jQuery, à la méthode attr et à la méthode de création d'un nouvel élément img, nous pouvons modifier la taille de l'image dans la page Web. Choisir différentes méthodes en fonction de besoins spécifiques et les appliquer de manière flexible peut nous aider à mieux obtenir des effets de page Web.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!