How to prevent image stretching and adapting in JS

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>

 <p>
  </p><p>
   <img  src="/static/imghwm/default1.png" data-src="..." class="lazy" alt="How to prevent image stretching and adapting in JS" >
  </p>
 

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(&#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>

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!

Recommended reading:

When Jstree selects the parent node, disable child nodes are also selected

Custom paginator in Swiper Detailed explanation of using steps

The above is the detailed content of How to prevent image stretching and adapting in JS. For more information, please follow other related articles on the PHP Chinese website!