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

目前提供两种解决方案:

方案一:

引入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. [Unity] 3D数学基础 - 2D旋转矩阵

    2D矩阵的旋转: NewX = X * Cos(α) - Y * Sin(α) NewY = X * Sin(α) + Y * Cos(α) 一般在三角函数中使用的是弧度,我们可以通过下面的公式将角度 ...

  2. fatal: could not read Username for 'https://github.com': No such file or directo

    Git push origin master报错 fatal: could not read Username for 'https://github.com': No such file or di ...

  3. PHP 图片上传

    PHP上传的简单案例: Html文件: <html> <form action="index.php" name="form" method= ...

  4. 5Hibernate入门----青软S2SH(笔记)

    这里有个问题,就是这本书第五章的示例代码中的hibernate的jar包有问题,各种找不到类,把lib下的包后换成第六章里的包就好了. 换成5.1的就好了,而且如果只是简单使用hibernate的话, ...

  5. [NHibernate]增删改操作

    目录 写在前面 文档与系列文章 添加数据 删除数据 修改数据 添加修改数据 总结 写在前面 上篇文章介绍了nhibernate的基于面向对象的条件查询.对一个项目来说,增删改查是必不可少的,虽然实现方 ...

  6. 【06-18】CentOS使用笔记

    使用中文输入法 搜狗输入法只支持Ubuntu sudo yum install "@Chinese Support" [系统]--->[首选项]--->[输入法]--& ...

  7. .net中c#获取本机IP地址实例代码

    * 在使用前,一定要注意在头部加上引用: using System.Net; 代码如下: using System; using System.Collections.Generic; using S ...

  8. bzoj1045 糖果传递

    escription 老师准备了一堆糖果, 恰好n个小朋友可以分到数目一样多的糖果. 老师要n个小朋友去拿糖果, 然后围着圆桌坐好, 第1个小朋友的左边是第n个小朋友, 其他第i个小朋友左边是第i-1 ...

  9. Android滑动菜单特效实现,仿人人客户端侧滑效果,史上最简单的侧滑实现

    http://blog.csdn.net/guolin_blog/article/details/8714621 http://blog.csdn.net/lmj623565791/article/d ...

  10. php之获取程序源码的方法

    文件hello.php和index.php在同一目录 hello.php <?php class hello{ public function __construct() { echo 'hel ...