Maison > Article > interface Web > Méthode de traitement adaptatif en Javascript

Méthode de traitement adaptatif en Javascript

亚连original: 2018-06-15 14:11:412947parcourir

Cet article vous présente principalement la méthode de traitement adaptatif consistant à utiliser Javascript pour empêcher l'étirement de l'image. L'article la présente en détail à travers un exemple de code. Il a une certaine valeur d'apprentissage de référence pour les études ou le travail de tous les amis qui en ont besoin. ensemble ci-dessous.

Préface

Je crois que dans le développement Web quotidien, en tant que front-end, vous rencontrez souvent le problème de l'étirement des images.

Par exemple, les bannières, les listes d'images et de textes, les avatars, etc. sont autant d'endroits où les utilisateurs ou les clients peuvent effectuer indépendamment des téléchargements d'images. Une fois l'image impliquée, cela impliquera bien sûr la question de l'étirement de l'image. , vous devez le faire manuellement lors du téléchargement de l'image. Le recadrage est la meilleure solution pour permettre aux utilisateurs ou aux clients de percevoir clairement le contenu effectif de l'image. Cependant, en raison de divers autres facteurs externes, si le recadrage n'est pas effectué, un traitement doit être effectué. effectué sur l'écran frontal pour satisfaire le besoin d'effets d'affichage optimaux lors du téléchargement d'images de toute taille.

À ce stade, nous devons considérer les effets extrêmes, comme indiqué ci-dessous :

Et nous L'effet souhaité est comme ça------

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éfinissez 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(&#39;list&#39;);
 getImgWH ( list );
 //执行宽高比对并设置img类名
 function getImgWH ( Obj ) {
  var img = Obj.getElementsByTagName(&#39;img&#39;);
  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(&#39;height&#39;);
    } else if ( width < height ) {
     this.classList.add(&#39;width&#39;);
    } else {
     this.style.width = &#39;100%&#39;;
     this.style.height = &#39;100%&#39;;
    }
   }
  }
 }
</script>

Ce qui précède est ce que j'ai compilé pour vous. J'espère que cela vous sera utile à l'avenir.

Articles associés :

Problèmes 404 associés concernant les fichiers de ressources du projet vue dans le webpack (tutoriel détaillé)

Dans vue.js Comment intégrer vux pour réaliser le chargement pull-up et l'actualisation pull-down

Comment utiliser Gulp pour implémenter la modularisation de pages Web statiques Comment le faire spécifiquement ?

Utilisez js pour implémenter WeChat pour évoquer Alipay afin de recevoir des enveloppes rouges (tutoriel détaillé)

Comment utiliser jqprint pour imprimer le contenu de la page

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：À propos de l'utilisation des filtres dans VueArticle suivant：À propos de l'utilisation des filtres dans Vue

Articles Liés

Voir plus