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. [Centos]升级安装GCC

    摘要 在尝试运行asp.net core站点的时候,发现了gcc包版本太低,造成一些错误.没办法只能升级gcc了. 升级 最新包:http://gcc.parentingamerica.com/rel ...

  2. 最新的jQuery插件和JavaScript库

    每一个前端开发人员很清楚的重要性和功能的JavaScript库提供.它提供了一个简单的接口,用于构建快速动态的接口,而无需大量的代码. 谢谢你的超级从事jQuery开发者社区,人始终是创造新的和令人惊 ...

  3. Unity3D 搭建优雅的UI框架

    为什么要使用UI框架?直接使用NGUI或UGUI一拖一拉直接搭载出界面不就行了? 我相信很多小白,包括我在刚学习Unity3D UI的时候都这样想过. 我的第一款款Unity2D游戏<山地赛车& ...

  4. JSP分页显示

    首先要定义四个变量: int pageSize: //每页显示多少条记录 int pageNow: //希望显示第几页 int pageCount: //一共有多少页 int rowCount: // ...

  5. Linux进程间通信（七）：消息队列 msgget()、msgsend()、msgrcv()、msgctl()

    下面来说说如何用不用消息队列来进行进程间的通信,消息队列与命名管道有很多相似之处.有关命名管道的更多内容可以参阅我的另一篇文章:Linux进程间通信 -- 使用命名管道 一.什么是消息队列 消息队列提 ...

  6. eclipse导入重复的项目、eclipse设置默认注释

  7. angularjs表单验证checkbox

    angularjs中默认有表单验证的支持,见文末的refer 我想要验证至少要选择一个checkbox,否则就不能提交 但是checkbox貌似没有简单的方法,想来想去给出下面的解决方案 valida ...

  8. java连接oracle范例

    需要引用:ojdbc6.jar import java.sql.*; public class Main { static Connection conn; static Statement stat ...

  9. XHPROF相关内容

    定义入口文件 define('XHPROF_OPEN', 0); define('XHPROF_ROOT', '/home/www/xhprof/'); // 开启调试模式 建议开发阶段开启 部署阶段 ...

  10. css3弹性盒模型

    一.简介 css3引入了新的盒模型——弹性盒模型,该模型决定一个盒子在其他盒子中的分布方式以及如何处理可用的空间.使用该模型,可以很轻松的创建自适应浏览器窗口的流动布局或自适应字体大小的弹性布局. 目 ...