图片内容在不同分辨率下居中显示

来源：互联网发布：黑马程序员java毕业生编辑：程序博客网时间：2024/05/19 13:06

1.img 图片内容在不同分辨率下居中显示（如果隐藏多余，在img外面套一个div 设定overflow： hidden。div的大小就是img显示区域的大小）

 <!DOCTYPE html><html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>无标题文档</title><style type="text/css">body,div,p,a,img,ul,ol,li{    margin: 0;    padding: 0;}#tab { overflow:hidden; 
　　　　width:100%;要显示的宽度    }#tab img{ overflow:hidden; width:1920px; height:447px;     position: relative;
　　　left:50%;  刚好在中间
　　　margin-left:-960px;图片宽度一半    }#tab>img:not(:first-child){ display:none; } </style><script>    //js幻灯片    window.onload = function(){             var images = document.getElementsByTagName('img');        var pos = 0;        var len = images.length;                 setInterval(function(){                     images[pos].style.display = 'none';            pos = ++pos == len ? 0 : pos;            images[pos].style.display = 'inline';                 },3000);             };</script> </head> <body><div id="tab">    <img src="images/20160907_100403_003.jpg" width="1920px" height="447"/>    <img src="images/20160907_100403_004.jpg" width="1920px" height="447"/>    </div></body></html>

2.背景图片内容在不同分辨率下居中显示(演示的图片宽度是1920px，当图片宽度大于显示屏的宽度时)

<div class="index-panel-pic1"></div>

.index-panel-pic1{    background: url(../images/20160907_100403_000.gif) no-repeat center center;    width:100%;    height:650px;    background-size: cover;}

0 0