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

目前提供两种解决方案：

方案一：

引入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. Android接入支付宝和银联

    支付宝接入参考链接:https://software.intel.com/zh-cn/node/542608 银联接入参考链接:http://blog.csdn.net/gf771115/articl ...

  2. 巧用setTimeout解决阻塞导致页面无法重绘

    项目中遇到一个javascript问题,大致如下: <!doctype HTML> <html> <head> <meta charset="utf ...

  3. System.Properties和System.getenv区别

    网上很多使用的是getProperties.说获得系统变量,但是其实不正确.getProperties中所谓的"system properties"其实是指"java s ...

  4. 兼容IE6的min-width、min-height

    如果一个站是宽屏的,你左右拖动浏览器的窗口网站宽度会随着窗口的大小而改变,而浏览器窗口宽度减小到一定程度后就会出现下边的滚动条,网站宽度就不会再减小了,我们知道这一简单的功能用css的min-widt ...

  5. fzoj1314 You are my brother

    题目描述 Little A gets to know a new friend, Little B, recently. One day, they realize that they are fam ...

  6. Windows平台下Qt中glut库的使用

    用Qt中的QGLWidget窗体类中是不包括glut工具库的,难怪在myGLWidget(在我的程序中是QGLWidget的派生类)中绘制实心球体是说“glutSolidSphere”: 找不到标识符 ...

  7. 墙裂推荐一本案例驱动的PhoneGap入门书，早看早收货

    清华大学出版社推出的<构建跨平台APP:PhoneGap移动应用实战> 零门槛学APP开发 从无到有 循序渐进 20余个示例APP 3个项目APP 全平台à跨终端à移动开发 完美生命周期: ...

  8. PHP通用的XSS攻击过滤函数，Discuz系统中 防止XSS漏洞攻击，过滤HTML危险标签属性的PHP函数

    XSS攻击在最近很是流行,往往在某段代码里一不小心就会被人放上XSS攻击的代码,看到国外有人写上了函数,咱也偷偷懒,悄悄的贴上来... 原文如下: The goal of this function ...

  9. vi 常用命令

    1.关于退出 :wq!  ----强制保存退出 :wq  ---- 保存退出 ZZ  ---- 作用和:wq一样,(注意Z是大写的,并且不是在命令模式) :q  ---- 退出 :q!  ---  强 ...

  10. 【Alpha】Daily Scrum Meeting第五次

    一.本次Daily Scrum Meeting主要内容 每个人学习情况 任务安排 界面设计问题,怎样让界面更好看? 二.任务安排 学号尾数 昨天做的任务 今天的任务 明天的任务 612 时间轴控件优化 ...