在图片全屏轮播时，为了兼容更大的屏幕，我们常常把图片设置为很大，但是在显示的过程中，如果让图片随浏览器自动变化的话，常常会把图片压缩变形，影响显示，在不压缩图片的情况下，如何只显示图片的中间部分呢？

目前提供两种解决方案：

方案一：

引入css

.parent {

    position: relative;

    overflow: hidden;
 　　width:400px;
　 　height:300px;

}

.child {

    position: absolute;

    top: -9999px;

    bottom: -9999px;

    left: -9999px;

    right: -9999px;

    margin: auto;

}

相应的html代码为：

<!DOCTYPE html>
<html lang="en">
　　<head>
　　<meta charset="UTF-8">
　　<title>Document</title>
　　<style type="text/css">
　　　　.parent {
　　　　　　position: relative;
　　　　　　overflow: hidden;
　　　　　　height: 300px;
　　　　　　width: 400px;
　　　　}

　　　　.child {
　　　　　　position: absolute;
　　　　　　top: -9999px;
　　　　　　bottom: -9999px;
　　　　　　left: -9999px;
　　　　　　right: -9999px;
　　　　　　margin: auto;
　　　　}
　　</style>
</head>
<body>
<div class="parent">
　　<img class="child" src="http://c11.eoemarket.com/upload/apps/2013/0420/131329/screenshots/21bf3021-aeef-4dbf-fd5c-6dd7c24cb1f3.jpg">
</div>
</body>
</html>


方案二：
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style type="text/css">
        body{
            text-align: center;
        }
        .container{
            width: 100%;
            height: 400px;
            margin: 0 auto;
            overflow: hidden;
        }
        .container img{
            margin: 0 -100% 0 -100%;
            vertical-align: top;
        }
    </style>
</head>
<body>
    <!-- 屏幕的放大或缩小都不会压缩里面的图片，里面的图片一直会在内容区域居中显示 -->
    <div class="container">
    </div>
</body>
</html>

图片过大，在div中不压缩的居中方法的更多相关文章

  1. css 如何使图片与文字在div中居中展示？

      1.情景展示 如何将图片与文字在div中一起居中展示? HTML片段 <div style="background: #fff;padding-top: 5px;border:1p ...

  2. div图片垂直居中 如何使div中图片垂直居中

    (从已经死了一次又一次终于挂掉的百度空间人工抢救出来的,发表日期 2014-04-03) 『此方法在ie7下,如果.box的高度为800等比较大的数值时,并不能起到垂直居中的作用.』 点评:关于图片垂 ...

  3. div中的img垂直居中的方法，最简单！ 偷学来的，，，不要说我抄袭啊(*^__^*)

    让div中的img垂直居中,水平居中很简单,用text-align:center; 让div中img垂直居中的方法其实也很简单 重点是: display:table-cell;   让标签具有表格的属 ...

  4. 小的div在大的div中垂直居中

    方法一: 1.代码: <div style="width:200px;height:200px;border:solid blue;position:relative;"&g ...

  5. 让一个小的div在大的div中居中显示

    原文 实现原理是设置margin自动适应,然后设置定位的上下左右都为0. 就如四边均衡受力从而实现盒子的居中: 代码: .parent { width:800px; height:500px; bor ...

  6. html如何让label在div中的垂直方向居中显示？

    设置label的行高 line-height 和div的高度一致即可.

  7. 控制DIV中的文字绝对居中

        水平居中:<div align="center">Content</div>       垂直居中:<div style="line ...

  8. div中div水平垂直居中

    方法-1 img { vertical-align: middle; } div:before { content: ""; display: inline-block; widt ...

  9. css div中内容绝对居中（多行内容）

    div中的内容绝对居中(不适合IE6哦,IE6我已经不考虑了),直接看代码吧. <!DOCTYPE HTML> <html> <head> <title> ...

随机推荐

  1. RDBMS DML DDL

    RDBMS RDBMS 指的是关系型数据库管理系统. RDBMS 是 SQL 的基础,同样也是所有现代数据库系统的基础,比如 MS SQL Server, IBM DB2, Oracle, MySQL ...

  2. 统计SqlServer每张表内的数据量

    CREATE TABLE #temp (TableName VARCHAR (255), RowCnt INT)EXEC sp_MSforeachtable 'INSERT INTO #temp SE ...

  3. [NHibernate]关联映射

    系列文章 [Nhibernate]体系结构 [NHibernate]ISessionFactory配置 [NHibernate]持久化类(Persistent Classes) [NHibernate ...

  4. AOP基本名词解释

  5. Shell入门教程：Shell当中的特殊变量

    Shell当中的特殊变量 一.保留变量 $IFS 这个变量中保存了用于分割输入参数的分割字符,默认识空格. $HOME 这个变量中存储了当前用户的根目录路径. $PATH 这个变量中存储了当前 She ...

  6. Alpha版本十天冲刺——Day 10

    站立式会议 最后一天,很高兴我们做出了跟预期差不多的版本,实现了基本功能,虽然还有一些bug,但是下一阶段我们会继续加油! 会议总结 队员 今天完成 遇到的问题 感想 鲍亮 功能细节更改 我的手机运行 ...

  7. html5新增标签及兼容

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  8. 二叉树建立，遍历和二叉排序树的判断【c++】

    // test.cpp : Defines the entry point for the console application. // #include "stdafx.h" ...

  9. GNU/Linux下LVM配置管理以及快照卷、物理卷、卷组、逻辑卷的创建和删除

    LVM是Linux环境中对磁盘分区进行管理的一种机制,是建立在硬盘和分区之上.文件系统之下的一个逻辑层,可提高磁盘分区管理的灵活性.最大的优点是在不损伤数据的前提下调整存储空间的大小. 本篇主要讲述L ...

  10. tp5 中 model 的删除方法

    根据主键删除(推荐) use app\index\model\User as UserModel; public function delete(){ UserModel::destroy([1,2, ...