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. ffmpeg常用转换命令，支持WAV转AMR

    音频转换: 1.转换amr到mp3: ffmpeg -i shenhuxi.amr amr2mp3.mp3 2.转换amr到wav: ffmpeg -acodec libamr_nb -i shenh ...

  2. MRDS学习三——机械车的改良（Activity的介绍）

    Activity:VPL中化繁为简的工具,可以使得真个VPL容易让人看懂,也能跟好的控制.它就很像把一堆比较复杂但相关的流程组合成一个自定义的Activity. 完成Activity的定义: 第一步: ...

  3. html嵌入样式表

    1.针对文件中的字体还有属性进行设置主要设置文字的大小及其颜色问题,未涉及div飘操作 处理页面CSS 先检测该内容部分是否已经设定了样式,如果没有单独设定再按照总体设计进行限定. eg:  h1 h ...

  4. 分布式中Redis实现Session终结篇

    上一篇使用Redis实现Session共享方式虽然可行,但是实际操作起来却很麻烦,现有代码已经是这个样子了,总不可能全部换掉吧!好吧,这是个很实际的问题,那么能不能实现无侵入式的分布式Session共 ...

  5. CentOS防火墙iptables的配置方法详解

    CentOS系统也是基于linux中的它的防火墙其实就是iptables了,下面我来介绍在CentOS防火墙iptables的配置教程,希望此教程对各位朋友会有所帮助. iptables是与Linux ...

  6. 【MySQL】 empty table and delete table.

    1.MySQL生成删除满足条件的表的sql: 1 SELECT 2 CONCAT( 3 'DROP TABLE ', 4 GROUP_CONCAT(table_name), 5 ';' 6 ) AS ...

  7. Python pydoc.py

    1. 查看帮助,我们可以在python命令行交互环境下用 help函数,比如: 查看 math 模块: >>> help('math')Help on built-in module ...

  8. SQL 创建随机时间的函数

    set ANSI_NULLS ON set QUOTED_IDENTIFIER ON go ALTER function [dbo].[fn_Randtime] ( @begin_date datet ...

  9. Visual Studio 2013 智能提示

    Visual Studio 2013中,智能提示功能突然用不了,查了一下,使用命令行重置VS的方法解决了这个问题.步骤如下: 开始菜单 -->所有程序-->Visual Studio 20 ...

  10. HTML 简单的介绍

    Q: 什么是HTML? A: HTML 是一种超文本标记语言. 所谓的超文本是指指页面内可以包含图片,链接,甚至音乐.程序等非文字元素.超文本标记语言的结构包括"头"部分(英语:H ...