显示缩略图时不挤压图片

前言：我们在前端显示图片缩略图的时候，会遇到不清楚图片的尺寸，然后使用固定高宽比的img来显示图片，这样会导致高宽比不一致的图片会被挤压拉伸。本文站以前端小白的视角来探讨这种问题的解决方案。

方案一 max-width和max-height

使用max-width和max-height来做，这种情况下不能保证每一张图片预览都是相同宽高的，但是却不会挤压拉伸图片。

例：

img {

    max-width: 450px;

    max-height: 450px;

}

方案二 使用background-size属性的cover值或者contain

按照单词的字面意思：

cover 把背景图像扩展至足够大，以使背景图像完全覆盖背景区域。背景图像的某些部分也许无法显示在背景定位区域中。

contain 把图像图像扩展至最大尺寸，以使其宽度和高度完全适应内容区域。 这种方式类似与第一种实现。​

例：

​

.container {

    width: 150px;

    height: 100px;

    background-image: url("http://i.stack.imgur.com/2OrtT.jpg");

    background-size: cover;

    background-repeat: no-repeat;

    background-position: 50% 50%;

}

.container {

    width: 150px;

    height: 100px;

    background-image: url("http://i.stack.imgur.com/2OrtT.jpg");

    background-size: contain;

    background-repeat: no-repeat;

    background-position: 50% 50%;

}

方案三 使用CSS3的object-fit属性

object-fit CSS 属性指定替换元素的内容应该如何适应到其使用的高度和宽度确定的框。

这个属性的值有以下几种：

fill：被替换的内容大小可以填充元素的内容框。 整个对象将完全填充此框。 如果对象的高宽比不匹配其框的宽高比，那么该对象将被拉伸以适应。相当于固定宽高下未做任何调整的样式。

contain：被替换的内容将被缩放，以在填充元素的内容框时保持其宽高比。 整个对象在填充盒子的同时保留其长宽比，因此如果宽高比与框的宽高比不匹配，该对象将被添加“黑边”。和backgroud-size属性的contain类似，只是多了黑边。

cover：被替换的内容大小保持其宽高比，同时填充元素的整个内容框。 如果对象的宽高比与盒子的宽高比不匹配，该对象将被剪裁以适应。和background-size属性的cover类似。

none：被替换的内容尺寸不会被改变。

scale-down：内容的尺寸就像是指定了none或contain，取决于哪一个将导致更小的对象尺寸。

.cover {

  object-fit: cover; // contain

  width: 50px;

  height: 100px;

}

方案四 container包裹，设置overflow:hidden

例：

.container {

    width: 300px;

    height: 200px;

    display: block;

    position: relative;

    overflow: hidden;

}

.container img {

    position: absolute;

    top: 0;

    left: 0;

    width: 100%;

}

图片居中：

var conHeight = $(".container").height();

var imgHeight = $(".container img").height();

var gap = (imgHeight - conHeight) / 2;

$(".container img").css("margin-top", -gap);

方案五 懒人必备 jqthumb库

---

作者：yypsober

来源：CSDN

原文：https://blog.csdn.net/yypsober/article/details/79468095

版权声明：本文为博主原创文章，转载请附上博文链接！