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

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

yulia
Libérer: 2018-09-15 15:26:50
original
18650 Les gens l'ont consulté

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%;
       }
Copier après la connexion

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"});}
Copier après la connexion

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);
}
Copier après la connexion

Méthode 3

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

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>
Copier après la connexion

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!

Étiquettes associées:
source:php.cn
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal