div里面一个img标签，按最大边缩放的不变形、不超出、上下左右居中的解决办法

最新推荐文章于 2023-07-25 12:40:55 发布

lukaifang

最新推荐文章于 2023-07-25 12:40:55 发布

阅读量2.3k

点赞数 1

分类专栏：开发技巧 web前端文章标签： css img 缩放不变形上下左右居中

本文链接：https://blog.youkuaiyun.com/IT_lukaifang/article/details/102984731

版权

开发技巧同时被 2 个专栏收录

11 篇文章

订阅专栏

web前端

11 篇文章

订阅专栏

本文介绍了如何使用CSS解决img标签在div中不变形、不超出边框并实现上下左右居中的问题。针对不同尺寸的图片，通过设置CSS样式，既能保持图片比例，又能确保图片在div内正确居中显示。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

div里面一个img标签的不变形、不超出、上下左右居中的解决办法

这段时间做一个比较简单的小项目，当中有一个图片展示的页面，当我把数据图片展示到前端的时候，发现前端小姐姐写的css样式有点小小的问题，就是我从后台返回到前端的图片，有的长，有的宽，大小不一，这里列举两张图片，一张长，一张宽：
在这里插入图片描述

原本的样式就是无解皮皮虾固定长宽，就导致图片成了这样：
在这里插入图片描述
很明显，变形了。

因此，首先让它不变形，
代码（这样就可以同时满足长和宽都不超出边框）：

div{
	width：650px；
	height：500px
}
img{
	max-width: 100%;
	max-height: 100%;
}

ok，然后就变成了这样：
在这里插入图片描述
很明显，上下没有居中，有人说，可以给img加上：

vertical-align:middle;
text-align:center;
dispaly:block;
margin:0 auto;
图片设为背景，然后：background-position:center;

等一系列方法。。。
但是~我试了都不行（各个页面情况不同，小伙伴们也可以试试上面的方法）
然后我最后用这种办法给它搞居中了：

position: relative;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);

最终代码：

div{
	width：650px；
	height：500px
}
img{
	max-width: 100%;
    max-height: 100%;
    position: relative;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
}

ok~下面是最终效果：
在这里插入图片描述

解决战斗~
网上很多让图片按长缩放和按宽缩放的办法，但是大多只考虑了一种情况，
我经过多次试验，发现这种办法确实可以解决我的此次需求。
现在分享出来，供大家参考~