资讯

精准传达 • 有效沟通

从品牌网站建设到网络营销策划,从策略到执行的一站式服务

CSS如何解决前端图片变形的问题

这篇文章将为大家详细讲解有关CSS如何解决前端图片变形的问题,小编觉得挺实用的,因此分享给大家做个参考,希望大家阅读完这篇文章后可以有所收获。

成都创新互联专注于企业成都营销网站建设、网站重做改版、武川网站定制设计、自适应品牌网站建设、HTML5商城开发、集团公司官网建设、成都外贸网站建设公司、高端网站制作、响应式网页设计等建站业务,价格优惠性价比高,为武川等各大城市提供网站开发制作服务。

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


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%); 
}

    

    

效果图:

CSS如何解决前端图片变形的问题

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

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


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%); 
}

    

    

效果图如下:

CSS如何解决前端图片变形的问题

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

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


div{
    width: 200px;
    height: 200px;
    border: 2px solid red;
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
}

效果图如下:

CSS如何解决前端图片变形的问题

CSS如何解决前端图片变形的问题

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

四、如果有什么方法,即能实现第三种方法的效果,又能兼顾SEO就好了。这里就要隆重推出:object-fit和object-position。你可以这么理解,object-position相当于background-position,它的默认值是50% 50%,也就是居中,所以一般不写,加了object-fit,默认就居中了。而object-fit,相当于background-size,即图片填充方式(这里不是图片大小)。


div{
    width: 200px;
    height: 200px;
    border: 2px solid red;
}
img{
    width: 100%;
    height: 100%;
    object-fit: cover;
}

    

效果图如下:

CSS如何解决前端图片变形的问题

CSS如何解决前端图片变形的问题

通过上图,我们几乎看到了和用背景方法设置效果几乎一模一样的结果。可以这么说,这就是背景方法的翻版,并且还可以避免背景图不会被搜索引擎不收录缺点。如果不考虑兼容IE,为什么不用这种方法呢。妈妈再也不用担心编辑乱上传图片了!

注意:图片一定要设置宽高,否则设置object-fit无效。将图片设置为何容器一样的宽高就可以了。容器也不需要设置溢出隐藏,object-fit会自动隐藏超出图片的宽高部分。

关于“CSS如何解决前端图片变形的问题”这篇文章就分享到这里了,希望以上内容可以对大家有一定的帮助,使各位可以学到更多知识,如果觉得文章不错,请把它分享出去让更多的人看到。


网页标题:CSS如何解决前端图片变形的问题
链接地址:http://cdkjz.cn/article/gdpsdi.html
返回首页 了解更多建站资讯
多年建站经验

多一份参考,总有益处

联系快上网,免费获得专属《策划方案》及报价

咨询相关问题或预约面谈,可以通过以下方式与我们联系

大客户专线   成都:13518219792   座机:028-86922220