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

目前提供两种解决方案：

方案一：

引入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. codevs1183 泥泞的道路

    题目描述 Description CS有n个小区,并且任意小区之间都有两条单向道路(a到b,b到a)相连.因为最近下了很多暴雨,很多道路都被淹了,不同的道路泥泞程度不同.小A经过对近期天气和地形的科学 ...

  2. bzoj1854 游戏

    Description lxhgww最近迷上了一款游戏,在游戏里,他拥有很多的装备,每种装备都有2个属性,这些属性的值用[1,10000]之间的数表示.当他使用某种装备时,他只能使用该装备的某一个属性 ...

  3. thinkphp3.2.3关于模板使用之一二

    1.包含文件 使用场景:比如我们在编写网页布局的时候,可能每一个网页的头和脚是相同的,此时如果给每一个网页分别设置,未免太麻烦了.此时就可以使用带包含文件. 首先检查配置文件查看我们的主题目录在哪儿, ...

  4. 解决VirtualBox只能安装32位系统的问题

    发现自己的笔记本(Thinkpad E440)里的 VirtualBox 只能安装 32位 的系统,如下图所示: 经过一番查资料,发现这玩意需要到BIOS里设置一下,方可安装 64位 系统,操作如下: ...

  5. Linux网络下载命令 wget 简介

    wget 是一个命令行的下载工具.对于我们这些 Linux 用户来说,几乎每天都在使用它.下面为大家介绍几个有用的 wget 小技巧,可以让你更加高效而灵活的使用 wget. $ wget -r -n ...

  6. HTML5CSS3特效-上下跳动的小球-遁地龙卷风

    (-1)写在前面 我用的是chrome49,这个idea是我在stackoverflow上回答问题时看到了,多谢这位同行,加深了我对很多技术点的理解,最近刚到北京,忙碌了一两天,在后续的日子里,会被安 ...

  7. 使用ajax技术实现txt弹出在页面上

    使用ajax技术实现txt弹出在页面上   使用ajax技术实现点击按钮,将TXT文本里的内容通过弹出框显示到页面上 /*事件会在页面加载完成后触发.*/ <script> window. ...

  8. 教你摸清 Linux PC 的性能底细？

    导读 基准测试是一项测试或一系列测试,用来确定某个计算机硬件运行起来的状况有多好.在许多情况下,“基准测试”实际上等同于“压力测试”.通过测试硬件的极限,然后可以将测得的结果与其他硬件测得的结果作一番 ...

  9. sdcms留言提交

    引入这两个js <script src="{webroot}lib/validator/jquery.validator.js"></script>< ...

  10. XmlException: 名称不能以“<”字符(十六进制值 0x3C)开头

    svn 版本冲突引起的: 产看config 文件里面的内容是否冲突,这个问题可能和代码无关