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

Question

相关代码：

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

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

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

Answer 1

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

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

Answer 2

图片超出div？