When the image size is smaller than the container, it is fine to display the image in full size, but when the image size is larger, try to scale the image to fit into the container, match the container size as much as possible, and keep the width to height ratio (the image cannot be stretched or extruded).

  1. background-size: contain

Background-size is a CSS3 style attribute. The attribute value contains an image that is scaled to the available space of the container at the same time, so that the width and height of the image fully adapt to the size of the container.

.box {
  width: 420px;
  height: 300px;
  background: url(https://cdn.pixabay.com/photo/2019/07/27/09/05/red-panda-4366264__340.jpg) no-repeat;
  background-size: contain; / * * /
  border: 1px solid #ccc;
}
Copy the code
<div class="box"></div>
Copy the code

  1. object-fit: contain

If the DOM structure cannot use the background image because of some limitation, but can only use to insert the image, the scene can use object-fit: Contain CSS declaration contains a background-size folder. In fact, the object-fit attribute can be applied to replaceable elements, such as video and iframe, not limited to pictures.

Note: IE does not support this property

.box > img {
  width: 100%;
  object-fit: contain;
}
Copy the code
<div class="box">
  <img src="https://cdn.pixabay.com/photo/2019/07/27/09/05/red-panda-4366264__340.jpg">
</div>
Copy the code

  1. Calculate by JS

When the above two automatic scaling solutions are not available, we have to manually calculate the actual render size of the image via JavaScript. (Such as a canvas drawing scene)

Ideas:

  1. Get the width and height of the image after loading it successfully;
  2. Judge whether the width height is less than or equal to the width height of the container, if so, it can be displayed directly according to the size of the original picture;
  3. If the width of the picture is larger than the width and height of the container (the width is larger than the width and height of the container, or the height is larger than the width and height of the container, or both), take the picture with the largest width and height for proportional scaling;
  4. After scaling is finished, we will judge the size of the container again (do not exclude some abnormal pictures);
  5. If the size is still larger than the container size, the width or height of the container is greater than the baseline, and then scale again.
  6. Finally, the scaled image is displayed.

Key code:

const temp = {
  dWidth: 0
  dHeight: 0
};

if (boxWidth >= imgWidth && boxHeight >= imgHeight) {  // The photo is less than or equal to the container size
  temp.dWidth = imgWidth;
  temp.dHeight = imgHeight;
} else {
  if (imgWidth >= imgHeight) {  // Width first
    temp.dWidth = boxWidth;
    temp.dHeight = imgHeight * boxWidth / imgWidth;
  } else {  // High priority
    temp.dHeight = boxHeight;
    temp.dWidth = imgWidth * boxHeight / imgHeight;
  }

  // Still larger than the container after scaling
  if (temp.dWidth > boxWidth) {
    temp.dHeight = temp.dHeight * boxWidth / temp.dWidth;
    temp.dWidth = boxWidth;
  } else if(temp.dHeight > boxHeight) { temp.dWidth = temp.dWidth * boxHeight / temp.dHeight; temp.dHeight = boxHeight; }}console.log(temp);
Copy the code

IO/Wingmeng/PE…