html图片显示变形,CSS完美解决前端图片变形问题的方法

在头条IT学堂看到CSS完美解决前端图片变形问题的文章，就记录分享下：

一、让图片的宽度或者高度等于容器的宽度或高度，多余的裁掉，然后让图片居中：

div{

width: 200px;

height: 200px;

overflow: hidden;

border: 2px solid red;

position: relative;

}

img{

width: 100%;

position: absolute;

top: 50%;

left: 50%;

transform: translate(-50%, -50%);

}

效果图：

如果图片的宽度限制了，高度大于等于容器的高度，就会填满整个容器，但是如果图片高度小于容器高度，就会出现空白，固定高度同理。此方法是最简单也最实用，配合后台裁切，更加完美。

二、让图片始终显示在容器内，并且居中显示。这种方法不会裁切图片，可以说是上面的升级版。

div{

width: 200px;

height: 200px;

border: 2px solid red;

position: relative;

}

img{

max-width: 100%;

max-height: 100%;

position: absolute;

top: 50%;

left: 50%;

transform: translate(-50%, -50%);

}

效果图如下：

可以看到，无论是宽度超过容器，还是高度超过容器，还是宽高都不超过容器，都能全部居中显示在容器内，不会裁切。

三、将图片变成背景，通过改变背景尺寸等可以任意改变图片在容器中显示的效果，操作是最方便的：

div{

width: 200px;

height: 200px;

border: 2px solid red;

background-repeat: no-repeat;

background-position: center;

background-size: cover;

}

效果图如下：

通过上图更改background-size，我们可以看到方法一和方法二都能轻松实现。而且，最后一种cover效果是最理想的，即居中显示，占满整个容器并且不变形。这种方法如果不考虑seo的话，用起来还是很顺手的。但是，如果您是资讯站、图片展等等，千万不要用这种方法，否则你的图片将很难被搜索引擎收录。