Question

如何让一个img在div中居中，而img的宽度可能比div还大

Answer 1

有时候大图宽度比较大，高度比较小，想让图片在div居中，又不想改变图片尺寸，以下是大图居中的方法

<div style="position: relative;height: 500px;width: 100%;overflow: hidden;">
    <img src="images/banner5.png" alt=""
    style="position: absolute; left: 50%;margin-left: -960px;" > 
    <!--图片大小1920*500-->
</div>

<!--严重注意事项***：

div中需要加height图片默认大小的高度；

因为img在使用绝对定位后会脱离文档流，给个border会发现div中没有内容存在，这样会使得下面的内容会跑上来盖住图片；给个height图片高度，撑起div大小，下面内容就不会再上来；

-->

<!--注意事项2

最外层div中宽度设置100%，加上overflow：hidden溢出隐藏；

使得大图与屏幕自适应不会出现滚动条；

-->

<!--注意事项3

最外层div中宽度设置100%，img中宽度不能设置为100%；

因为最外层div中宽度设置100%为屏幕的宽度大小，img中宽度应该为图片默认大小，margin-left设置为图片宽度的一半尺寸（负值）才能使图片中心与屏幕中心对齐；img不能设置为width：100%，因为img中设置width：100%后，图片宽度就和div宽度一致，改变了图片宽度尺寸大小；

大图居中原理：首先left：50%是相对于屏幕的50%，让图片左边缘位于屏幕正中间，然后再margin-left让图片左移使图片的中心与屏幕的中心对齐；所以是div为100%，而img不能为100%；如果img为100%，则图片大小改变，margin-left的值就不是默认图片尺寸的一半；

-->

Answer 2

给IMG标签一个max-width就可以控制它的最大宽度了。

img{max-width:90%;margin-right:auto;margin-left:auto;}

这样就可以了，超过DIV的90%，IMG自动保持在DIV的90%,如果不超过，那就按正常大小，而且图片是在DIV中居中的。。

Answer 3

将图片的max-width:数值px; 数值设置成你的div2的宽度

Answer 4

给img定一个宽高就好办了