超出容器的图片在容器里左右居中，不使图片变形（大图片居中问题）

最新推荐文章于 2024-07-31 16:36:47 发布

厘子车

最新推荐文章于 2024-07-31 16:36:47 发布

阅读量384

点赞数

分类专栏：样式css 文章标签： img css 居中

本文链接：https://blog.csdn.net/qq_39882537/article/details/102499943

版权

7 篇文章 0 订阅

订阅专栏

父元素：overflow:hidden; text-align:center;
子元素（img标签）：margin:0 -100%;

实例代码片段：

<li className={style.father}>
	<img src={require('./img/zt2.jpg')} alt="" />
</li>

.father{
    text-align: center;
    overflow: hidden;
}
.father img{
    width: initial;
    height: 460px;
    margin: 0 -100%;
}

直接上代码：

<div class="box"></div>

.box{
	width: 400px;
	height: 300px;
	background: url(img/dl6.jpg) no-repeat center;
}

例如内容几个标签宽度可以设置width：fit-content，不建议使用，有兴趣的可以自测一下兼容性

都是工作中遇到的问题，纯属个人总结，欢迎指出更好方法

其他居中方法参考本人另外一篇文章
css 样式常用水平/垂直居中

关注

专栏目录