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. JQuery常用代码汇总

    获取<input />的value $("#id").val( ); 标签间的html $("#id").html('<tr><t ...

  2. 深入理解javascript原型和闭包（14）——从【自由变量】到【作用域链】

    先解释一下什么是“自由变量”. 在A作用域中使用的变量x,却没有在A作用域中声明(即在其他作用域中声明的),对于A作用域来说,x就是一个自由变量.如下图 如上程序中,在调用fn()函数时,函数体中第6 ...

  3. 大熊君大话NodeJS之------MongoDB模块（额外篇）

    一,开篇分析 这篇属于扩展知识篇,因为在下面的文章中会用到数据库操作,所以今天就来说说它(Mongodb模块). (1),简介 MongoDB是一个基于分布式文件存储的数据库.由C++语言编写.旨在为 ...

  4. [译]git的那些flag

    git add -p console有一个交互式的界面(如下图),让你一个一个文件的选择是add还是不add.注意这些文件必须是tracked过的, 也就是说如果你的新的文件从来没有add过,那么他不 ...

  5. PHP慢脚本日志和Mysql的慢查询日志

    1.PHP慢脚本日志 间歇性的502,是后端 PHP-FPM 不可用造成的,间歇性的502一般认为是由于 PHP-FPM 进程重启造成的. 在 PHP-FPM 的子进程数目超过的配置中的数量时候,会出 ...

  6. tyvj1294 小v的舞会

    背景 "梦中伊人,断我男儿几寸柔肠,于断桥,不知西风自憔悴那姑娘."小v的梦中伊人要带领一大帮姐妹MM们来小v家举办舞会,然而怎么安排跳舞的顺序成了大问题,你能帮他么? 描述 有n ...

  7. [Scala] akka actor编程（一）

    Akka基础 Akka笔记之Actor简介  Akka中的Actor遵循Actor模型.你可以把Actor当作是人.这些人不会亲自去和别人交谈.他们只通过邮件来交流.  1. 消息传递 2. 并发 3 ...

  8. nyoj 776 删除元素

    删除元素 时间限制:1000 ms  |  内存限制:65535 KB 难度:2 描述 题意很简单,给一个长度为n的序列,问至少删除序列中多少个数,使得删除后的序列中的最大值<= 2*最小值 输 ...

  9. jquery解析php通过ajax传过来的json二维数组对象

    ajax获得php传过来的json二维数组对象,jquery解析 php代码: <?php $news = array( '武汉'=>array(1,2,3), '广州'=>arra ...

  10. Hibernate POJO在序列化（JSON）时遇到的若干问题

    假设某 POJO 有属性如下: private Set<User> users = new HashSet<>(0); @OneToMany(fetch = FetchType ...