看过网上其他人的方法,大多很复杂。本例的方法十分简单,而且图片尺寸超过外围DIV仍然能保持居中。先看效果图
来看实现效果的css代码:
div{
position: relative;
left:100px;
top:100px;
border: solid 1px red;
overflow: hidden;
}
img{
position: absolute;
margin: auto;
top: -9999px;
right: -9999px;
bottom: -9999px;
left: -9999px;
}
是不是超级简单?下面看看html代码:
<div style="width:100px; height:100px;">
<img src="dog.jpg" alt=""/>
</div>
<div style="width:300px; height:300px;">
<img src="dog.jpg" alt=""/>
</div>
上面html代码是两个图片的例子。怎么样,是不是html结构很简单?
本人实测浏览器有:Chrome 49 、Firefox 46、IE7/8/9/10,只有IE7不兼容,其他的都兼容。
简单解释:这里img{}里的属性全部都是必需的,外围DIV只有position: relative;是必需的,其他的根据实际情况添加。如果图片尺寸小于外围div,css中,top、right、bottom、left可以为0。但如果图片尺寸大于外围div,则需要把这四个属性设置为负值,图片越大,负值越小,所以我就干脆给个-9999px这样很小很小的值,一劳永逸了。