Comment obtenir une mise à l'échelle proportionnelle des images sans déformation à l'aide de CSS (exemple de code)

Nous avons souvent besoin de redimensionner les images au travail, mais certaines mises à l'échelle déformeront l'image, alors aujourd'hui je vais vous présenter Comment utiliser CSS pour obtenir une mise à l'échelle proportionnelle des images sans déformation Amis qui apprennent. CSS, dépêchez-vous Venez voir !

Le code suivant vous présentera comment utiliser CSS pour réduire la taille de l'image sans déformation. Le code spécifique est le suivant :

<img src="../images/bg1.jpg" alt="" />
      img {
           /*等宽缩小不变形*/
           /*width: 100%;*/
           /*二选一*/
           /*等高缩小不变形*/
           height: 100%;
       }

Supplément : CSS contrôle la taille. de l'image sans déformation

Méthode 1. (Pas mal, je l'utilise)

img {max-width:630px;myimg:expression_r(onload=function(){this.style.width=(this.offsetWidth > 630)?"630px":"auto"});}

Réglez la largeur maximale à 630px. Si elle est supérieure à 630, définissez la largeur de l'image. à 630. La hauteur sera réduite avec la proportion et ne posera aucun problème dans l'image

Méthode 2

img,a img{
border:0;
margin:0;
padding:0;
max-width:590px;
width:e-xpression(this.width>590?"590px":this.width);
max-height:590px;
height:e-xpression(this.height>590?"590px":this.height);
}

Méthode 3

div img {
max-width:600px;
width:600px;
width:expression(document.body.clientWidth>600?”600px”:”auto”);
overflow:hidden;
}

max-width:600px; dans IE7, FF et autres navigateurs non-IE La largeur maximale sous le navigateur est de 600px. Mais cela ne fonctionne pas dans IE6.

width:600px; La taille de l'image est de 600px dans tous les navigateurs

Lorsque la taille de l'image est supérieure à 600px, elle sera automatiquement réduite à 600px. Valable dans IE6.

débordement : masqué ; masquez la partie excédentaire pour éviter l'étirement et la déformation causés par le non-contrôle de la taille de l'image.

4. Si vous souhaitez définir la hauteur et la largeur de l'image pour ne pas dépasser une certaine valeur fixe, vous devez réduire l'image à cette taille lorsque la hauteur ou la largeur de l'image dépasse cette valeur.

(1) Pour les navigateurs modernes, tels que Firefox ou IE7 et supérieurs, utilisez simplement les propriétés CSS max-width et max-height directement.

(2) Pour IE 6.0 et versions antérieures, les deux propriétés CSS ci-dessus seront ignorées. Pour gérer ce genre de choses auparavant, nous utilisons souvent Javascript puis ajoutons des événements onload aux images. Par exemple :

<imgsrc="..."alt="..."onload="resizeImage(this)"/>
<script type="text/javascript">
　　functionresizeImage(obj){
　　obj.width=obj.width>50&&obj.width>obj.height?50:auto;
　　obj.height=obj.height>50?50:auto;
　　}
</script>

Résumé : Ce qui précède est l'exemple de code introduit par l'éditeur pour obtenir la même proportion d'images sans déformation. J'espère que cela vous sera utile si vous en avez. questions Veuillez me laisser un message et je vous répondrai à temps. Je voudrais également vous remercier tous pour votre soutien au site Web PHP chinois !

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!