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

目前提供两种解决方案：

方案一：

引入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. 百度编辑器 ueditor 内容编辑自动套P标签，及p标签 替换

    如图,红框为回车键和shift+回车 :    ===>>  ueditor.all.js中: 1: 搜索修改成false:allowDivTransToP: false 再搜索并修改以下 ...

  2. [NHibernate]一对多关系（级联删除，级联添加）

    目录 写在前面 文档与系列文章 一对多关系 一个例子 级联删除 级联保存 总结 写在前面 在前面的文章中,我们只使用了一个Customer类进行举例,而在客户.订单.产品中它们的关系,咱们并没有涉及, ...

  3. angularjs 中state.go 跳转并且打开新的浏览器窗口

    包子最近遇到业务人员提的非常无厘头的需求,就是调页面的时候,一定要打开一个新的浏览器窗口...>o<奇葩!!! 但是我的页面都是state.go跳转的呀,我各种百度,发现,貌似state, ...

  4. PHP 表单

    PHP 中的 $_GET 和 $_POST 变量用于检索表单中的信息,比如用户输入. 表单验证: 应该在任何可能的时候对用户输入进行验证(通过客户端脚本).浏览器验证速度更快,并且可以减轻服务器的负载 ...

  5. 自写网站入门阶段之三：兼容大战与jq初探

    自上一次作小结至今已整整一个月,在忙乎了半个月的工作之后闲下来的一个下午我终于可以再次作这个阶段的小结了.首先庆幸的是在同学的推荐下我顺利的找到了工作并于月初3号正式上班,这一点非常感谢他,让我免去了 ...

  6. Extjs 制作柱状图

    在JSP页面制作柱状图,可以根据数据的变化动态实时的变化 主要是使用EXTJS自带的插件达到效果 Ext.require('Ext.chart.*'); Ext.require([ 'Ext.Wind ...

  7. zTree学习

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  8. php自动加载

    初學PHP時,最早會面對的問題之一就是require與include差別何在?require_once與include_once又是什麼?弄懂這些問題之後,如果不使用framework,直接開發,便常 ...

  9. c语言中的一些注意点

    1.头文件两种形式的区别(#include<mystring.h>与#include"mystring.h") 当运行一个程序时,需要调用自己写的函数时,需要在头文件加 ...

  10. iOS Waxpatch项目(动态更新)

    我的iOS Waxpatch项目地址https://github.com/piaojin/iOS-WaxPatch