Home > Article > Web Front-end > How to prevent image stretching and adapting in JS

How to prevent image stretching and adapting in JS

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

This time I will show you how to prevent image stretching and adapting in JS. What are the precautions for preventing image stretching and adapting in JS? The following is a practical case, let’s take a look.

Preface

I believe that in daily web development, as a front-end, you often encounter problems with image stretching.

For example, banners, picture and text lists, avatars, etc. are all places where users or customers can independently operate pictures to upload. Once pictures are involved, the problem of picture stretching will be involved. Of course, manual cropping is done when uploading pictures, allowing users or customers to The customer clearly perceives that the effective content of the picture is the optimal solution. However, under various external factors, if there is no cropping, it needs to be processed on the front-end display to meet the requirements of uploading pictures of any size. Under the circumstances, the optimal display effect is required.

How many steps do you need to put the picture into the frame? Three steps...let's get started

The first step: first draw a frame (here is a method of adaptive frame)

// 假定需要一个在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>

Step 2: Set the css needed for the 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>

Step 3: js gets the image height comparison and adds a class name to 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>

It is relatively simple to prevent images from being stretched, but in actual projects it needs to be paid enough attention to. A web page will become a picture or fail. If the image is stretched, it will wait for the designer to worry about it, hahahaha...

I believe you have mastered the method after reading the case in this article. For more exciting information, please pay attention to other related articles on the php Chinese website!

How to prevent image stretching and adapting in JS

Related articles