【设置图片主体部分居中】

最新推荐文章于 2024-10-04 06:11:34 发布

weixin_33770878

最新推荐文章于 2024-10-04 06:11:34 发布

阅读量202

点赞数

文章标签： xhtml

原文链接：http://www.cnblogs.com/guduoduo/p/3673726.html

版权

网页制作过程中，我们常常需要插入图片，有时需要插入大于浏览器窗口大小的图片，在我们横向改变浏览器窗口大小的时候图片总有一部分会被遮挡，如果我们想要让图片的主体部分一直居中，这个时候可以用我下面讲到的这个方法来实现。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
    <title>title</title>
    <style type="text/css">
        *{   
            margin:0px;
            padding:0px;
        }
        body{
            min-width: 960px;   /*当浏览器窗口宽度调整至960px时开始出现窗口滚动条，主体元素开始被遮挡*/
        }
        .imgBox{
            width: 100%;
            overflow: hidden;
        }
        .imgBox img{   /*实现该效果的主要CSS样式*/
            display: block;
            left: 50%;
            margin-left: -960px;
            position: relative;
        }
    </style>
</head>
<body>
    <div class="imgBox">
        <img src="图片地址"/>  <!-- 这里的图片宽度大于浏览器窗口可视宽度 -->
    </div>
</body>
</html>