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="data:images/20160907_100403_003.jpg" width="1920px" height="447"/>

    <img src="data: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;

}

css 图片内容在不同分辨率下居中显示(演示的图片宽度是1920px，当图片宽度大于显示屏的宽度时)的更多相关文章

  1. Js控制弹窗实现在任意分辨率下居中显示

    弹窗居中比较烦人的是怎么才能在任意分辨率下实现居中显示.1,html部分 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transition ...

  2. android studio 查看预览所有屏幕分辨率下的显示

    你可以打开在窗口的右侧预览面板设置上的布局.你可以通过修改面板顶部面板改变各种选项来修改预览,包括预览设备,主题,平台版本等等,可以同时预览多个设备上布局,可以从“设备”选项中下拉”预览所有屏幕的尺寸 ...

  3. css绝对定位如何在不同分辨率下的电脑正常显示定位位置？

    有时候我们在写页面中,会发现绝对定位的父级元素已经相对定位了,但是在不同分辨率的电脑下,绝对定位还是会错乱,似乎父级的相对定位并没有起了作用. 首先要明白如下几个原理: 1.笔记本电脑的分辨率一般为1 ...

  4. MFC不同分辨率和缩放下正常显示的方法

    方法1:为了满足Windows操作系统上不同分辨率下的显示,我们在OnPaint中重绘.

  5. CSS——盒子居中显示

    嵌套中个的子盒子使用了绝对定位,父盒子使用了相对定位.那么子盒子如何居中显示: 1.距离左偏离50% 2.margin-right子盒子宽度的一半 <!DOCTYPE html> < ...

  6. 多个div居中显示

    页面中有多个div时我们希望并排居中显示,可以通过在并排显示的div上一层再加一个div,设定宽度,然后让其居中显示达到需要的效果. 关键是要对外层div设定宽度. <!DOCTYPE html ...

  7. 扩展Snackbar 使其支持居中显示

    https://github.com/nispok/snackbar 默认Snackbar支持底部或者顶部显示,不支持居中显示 查看Snackbar.java的源码可以看到createMarginLa ...

  8. 简单两步使用css控制div下导航栏ul居中显示

    第一步:父层设置文本居中属性 ul{ text-align:center; } 第二步:li设置内联样式 li{ display:inline; } PS 只需以上两步就可以实现导航栏居中显示了,但为 ...

  9. jQery使网页在显示器上居中显示适用于任何分辨率

    这篇文章主要介绍了jQery使网页在任何分辨率的显示器上居中显示的方法,需要的朋友可以参考下 检测屏幕宽度,并设置为id为frame的div宽度, 根据自己网页的最大宽度来调节,小demo最大宽度为1 ...

随机推荐

  1. javascript数据结构与算法---栈

    javascript数据结构与算法---栈 在上一遍博客介绍了下列表,列表是最简单的一种结构,但是如果要处理一些比较复杂的结构,列表显得太简陋了,所以我们需要某种和列表类似但是更复杂的数据结构---栈 ...

  2. Node.js Stream - 实战篇

    邹斌 ·2016-07-22 11:04 背景 前面两篇(基础篇和进阶篇)主要介绍流的基本用法和原理,本篇从应用的角度,介绍如何使用管道进行程序设计,主要内容包括: 管道的概念 Browserify的 ...

  3. JSP脚本中的9个内置对象

    JSP脚本中包含9个内置对象,这9个内置对象都是Servlet API接口的实例,只是JSP规范对它们进行了默认初始化.也就是说它们已经是对象,可以直接使用. 我们随意打开一个由JSP页面生成的Ser ...

  4. JavaScript -- 小试牛刀

    //var a = parseInt(window.prompt("请输入一个数字!","")); //switch(a) { // case 1 : // c ...

  5. ASP.NET 实现登陆验证

    public class ValidModule : IHttpModule { /// <summary> /// 您将需要在网站的 Web.config 文件中配置此模块 /// 并向 ...

  6. Ubuntu12.04安装lnmp环境笔记

    说明:笔记中使用的命令都是在root账户权限下执行的,如果使用的是普通账户,请注意在命令前加上“sudo”指令. 1.更新apt-get软件库: 命令:apt-get update 该操作的目的是确保 ...

  7. Eclipse 的单步调试

    1.设置断点在程序里面放置一个断点,也就是双击需要放置断点的程序左边的栏目上. 2.调试(1)点击"打开透视图"按钮,选择调试透视图,则打开调试透视图界面,然后先设置断点,按调试按 ...

  8. 找出只含有2,3,5因子构成的数的第N个

    https://leetcode.com/problems/ugly-number-ii/ 刚开始,一看题以为用刷选法,但是当数据量大时明显不行.然后感觉用含2,3,5因子的个数当做进制来处理还是不行 ...

  9. rename

    重命名文件名: # rename hosts.conf.正式配值文件 hosts.conf.正式配置文件 hosts.conf.正式配值文件 [root@monitor- vhost]# ls hos ...

  10. 【MongoDB】递归获取字段更新表达式,更新复杂数据类型对象

    在实际更新Mongo对象时发现,原有的更新代码无法更新复杂的数据类型对象.恰好看到张占岭老师有对该方法做相关的改进,因此全抄了下来. 总的核心思想就是运用反射与递归,对对象属性一层一层挖掘下去,循环创 ...