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. Express知识整理

    开发实例 Express开发实例(1) —— Hello,world! Express开发实例(2) —— Jade模板引擎

  2. JDI tutorial （trace example）

    Components Debugger Interfaces / |--------------| / | VM | debuggee ----( |--------------| <----- ...

  3. 配置php.ini实现PHP文件上传功能

    本文介绍了如何配置php.ini实现PHP文件上传功能.其中涉及到php.ini配置文件中的upload_tmp_dir.upload_max_filesize.post_max_size等选项,这些 ...

  4. C和指针 第五章 警告总结

    1.有符号的值得右移位操作是不可移植的 2.移位操作的位数是个负数,是未定义的 3.连续赋值的各个变量的长度 不一,导致变量值截断. #include <stdio.h> int main ...

  5. iOS如何跳到系统设置里的各种设置界面

    最近项目需要授权时候跳转到相关的设置页面,自己总结了一下,想写到简书上来,和大家分享一下. 在本人测试后,iOS8和9都没有问题,直接跳转到各个页面,这可能苹果对这方面开放了吧.第一步修改plist文 ...

  6. nginx error_log 错误日志配置说明

    nginx的error_log类型如下(从左到右:debug最详细 crit最少): [ debug | info | notice | warn | error | crit ] 例如:error_ ...

  7. 局部加权回归、欠拟合、过拟合（Locally Weighted Linear Regression、Underfitting、Overfitting）

    欠拟合.过拟合 如下图中三个拟合模型.第一个是一个线性模型,对训练数据拟合不够好,损失函数取值较大.如图中第二个模型,如果我们在线性模型上加一个新特征项,拟合结果就会好一些.图中第三个是一个包含5阶多 ...

  8. tp框架之增删改查

    控制器 <?php namespace Home\Controller; use Think\Controller; class CeShiController extends Controll ...

  9. BlockingQueue使用

    import java.util.concurrent.ArrayBlockingQueue; import java.util.concurrent.BlockingQueue; import ja ...

  10. 基于AgileEAS.NET SOA 平台SAAS架构技术的开源分销ERP系统-SmartERP.NET下载配置说明

    一.前言 AgileEAS.NET SOA 中间件平台是一款基于基于敏捷并行开发思想和Microsoft .Net构件(组件)开发技术而构建的一个快速开发应用平台.用于帮助中小型软件企业建立一条适合市 ...