css - 宽度溢出的图片在属性设置为overflow:hidden的父元素中如何实现水平居中？

问题描述

问 题

相关代码：

<div style="overflow:hidden;" id="wrapper">
    <img src="#"/>
</div>

div和img都为响应式，div宽度为100%，最小宽度为1200px；
画了个简图方便理解

如何不用JS，不用背景图片，实现响应式的IMG始终居中？

解决方案

我大概试了一下，应该没问题。只写了水平的。垂直的同理。如有错误请指正

#wrapper{width:100px;height:100px; position:relative; margin:0 auto;overflow:hidden;border:1px solid #000;}
#wrapper img{position: absolute; left:50%; transform:translateX(-50%);}

这篇关于css - 宽度溢出的图片在属性设置为overflow:hidden的父元素中如何实现水平居中？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！