图片宽度大于div宽度时,图片仍然显示在div的中间位置。
我这边想做一个效果:一个div中有一个图片,然后图片的最小宽度为100%;手指在屏幕上向下滑动时,图片高度变大,宽度自动变大,此时这个图片就没有显示在div的中间位置了,请问有什么方法能让图片的宽度超过div宽度时仍然显示在div的中间位置呢?
这里的图片宽度是会动态改变的,所以直接margin-left:-10%;这个样式不太实用。
代码如下:
<style type="text/css">
html,body{ height:100%;}
*{ margin:0; padding:0;}
div{ text-align:center; overflow:hidden;}
div img{ min-width:120%;}
</style>
</head>
<body>
<div>
<img src="images/01.jpg" />
</div>
</body>