现在很多网站的图片都设计成超宽图片,在小屏显示器上显示,会遇到显示不全,不居中显示的问题。
为了网站的美观和图片达到好的效果,我们要实现在超宽图片全屏居中显示,实现方法如下:
<html>
<head>
<title>超宽图片全屏居中,超出部分自动隐藏</title>
<style>
.content {
width:100%;
position:relative;
overflow:hidden;
/*height:1000px;高度可以不设置*/
}
.info {
width:1600px;
/*position:absolute;设置高度时使用*/
position:relative; /*页面底部有内容时使用*/
left:50%;
margin-left:-800px;
}
</style>
</head>
<body>
<div class="content">
<div class="info">
<img src="adimg.jpg">
</div>
</div>
</body>
</html>
css部分宽度根据图片的尺寸进行设置即可。