Maison > Article > interface Web > Comment empêcher l'étirement et l'adaptation des images dans JS

Comment empêcher l'étirement et l'adaptation des images dans JS

php中世界最好的语言original: 2018-04-13 14:11:462198parcourir

Cette fois, je vais vous montrer comment empêcher l'image de s'étirer et de s'adapter avec JS. Quelles sont les précautions qui empêchent JS de s'étirer et de s'adapter à l'image. cas, jetons un coup d'oeil.

Avant-propos

Je pense que dans le développement Web quotidien, en tant que front-end, vous rencontrez souvent des problèmes d'étirement d'image.

Par exemple, les bannières, les listes d'images et de textes, les avatars, etc. sont tous des endroits où les utilisateurs ou les clients peuvent utiliser indépendamment les images à télécharger. Une fois les images impliquées, le problème de l'étirement de l'image sera bien sûr effectué. télécharger des images, permettant aux utilisateurs ou aux clients de Le client perçoit clairement que le contenu efficace de l'image est la solution optimale. Cependant, sous divers facteurs externes, s'il n'y a pas de recadrage, elle doit être traitée sur l'écran frontal pour y répondre. les exigences de téléchargement d’images de toute taille. Dans ces circonstances, un effet d’affichage optimal est requis.

De combien d'étapes avez-vous besoin pour mettre l'image dans le cadre ? Trois étapes... Commençons

Première étape : dessiner d'abord un cadre (voici une méthode de cadres adaptatifs)

// 假定需要一个在750px屏幕下宽400px，高280px的盒子
// 宽度 = 400 / 750 = 0.5333
// 高度 = 280 / 400 * 0.5333 = 0.3733
<style>
 .img-box{
  position: relative;
  width: 53.33%;
  height: 0;
  padding-bottom: 37.33%;
  overflow: hidden;
  background-color: #eee;
 }
</style>
<body>
 <p id="list">
  <p class="img-box">
   <img src="..."/>
  </p>
 </p>
</body>

Étape 2 : Définir le CSS nécessaire pour l'image

<style>
 .width{
  position: absolute !important;
  width: 100% !important;
  min-height: 100% !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  -ms-transform: translateY(-50%) !important;
  -moz-transform: translateY(-50%) !important;
  -webkit-transform: translateY(-50%) !important;
  -o-transform: translateY(-50%) !important;
  display: block;
 }
 .height{
  position: absolute !important;
  height: 100% !important;
  min-width: 100% !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  -ms-transform: translateX(-50%) !important;
  -moz-transform: translateX(-50%) !important;
  -webkit-transform: translateX(-50%) !important;
  -o-transform: translateX(-50%) !important;
  display: block;
 }
</style>

Étape 3 : js obtient la comparaison de la hauteur de l'image et ajoute un nom de classe à img

//需要注意的是，不能在css中直接给img设置宽度和高度
//否则在img.onload后获取的宽高是css设置的宽高
//同时建议使用dom对象来获取img标签
<script>
 var list = document.getElementById('list');
 getImgWH ( list );
 //执行宽高比对并设置img类名
 function getImgWH ( Obj ) {
  var img = Obj.getElementsByTagName('img');
  for( var i=0 ; i<img.length ; i++ ){
   img[i].onload = function(){
    var width = this.width;
    var height = this.height;
    if ( width > height ) {
     this.classList.add('height');
    } else if ( width < height ) {
     this.classList.add(&#39;width&#39;);
    } else {
     this.style.width = &#39;100%&#39;;
     this.style.height = &#39;100%&#39;;
    }
   }
  }
 }
</script>

Il est relativement simple d'empêcher l'étirement des images, mais dans les projets réels, il faut y prêter suffisamment d'attention. Une page Web deviendra une image ou un échec. Si l'image est étirée, elle attendra simplement que le concepteur s'inquiète. à ce sujet, hahahaha...

Je pense que vous maîtrisez la méthode après avoir lu le cas dans cet article. Pour des informations plus intéressantes, veuillez prêter attention aux autres articles connexes sur le site Web chinois de php !

Lecture recommandée :

Lorsque le nœud parent est sélectionné dans Jstree, la désactivation des nœuds enfants est également sélectionnée

Paginateur personnalisé dans Swiper Explication détaillée des étapes d'utilisation

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!

Déclaration：

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

Article précédent：Explication détaillée de l'utilisation des filtres Vue FiltersArticle suivant：Explication détaillée de l'utilisation des filtres Vue Filters

Articles Liés

Voir plus