今日在百度贴吧中，一贴有提出如下问题：

对于这个问题，咱们贴上代码看效果

   1: <html>
   2: <head>
   3:     <meta http-equiv="content-type" content="text/html;charset=utf-8">
   4:     <style type="text/css">
   5:         #div1
   6:         {
   7:             margin: 0 auto;
   8:             width: 300px;
   9:             border: 1px solid black;
  10:         }
  11:         #div2
  12:         {
  13:             margin-top: 10%;
  14:             margin-left: -30px;
  15:             margin-right: -30px;
  16:             margin-bottom: 10%;
  17:             overflow: hidden;
  18:         }
  19:     </style>
  20: </head>
  21: <body>
  22: <div id="div1">
  23:         <div id="div2">
  24:             <img src="bei.jpg" alt="图片加载失败">
  25:         </div>
  26: </div>
  27: </body>
  28: </html>

效果：

简单阐述; 图片放在子div中，而子div没有设置高宽，所以img的大小就撑起了子div的大小，margin值是根据父div及效果图来设置的。如果你有其他思路，欢迎交流

来源：http://www.ido321.com/457.html

问题：贴友关于CSS效果的实现的更多相关文章

  1. [转载] 高大上的 CSS 效果：Shape Blobbing

    这篇大部分是转载,来自<高大上的 CSS 效果:Shape Blobbing>和 <Shape Blobbing in CSS> 有部分是自己理解和整理,配合效果要做出 app ...

  2. CSS 效果汇总

    只要决心够, 就能征服痛苦. 把一些常用的 CSS 效果记录下来 1. 利用 z-index :hover 显示层 github 效果地址>> 此效果主要利用 a:hover 来改变 sp ...

  3. CSS效果：这里有你想要的CSS3漂亮的自定义Checkbox各种复选框

    在原来有一篇文章写到了<CSS效果篇--纯CSS+HTML实现checkbox的思路与实例>. 今天这篇文章主要写各种自定义的checkbox复选框,实现如图所示的复选框: 大致的html ...

  4. CSS效果篇--这里有你想要的CSS3漂亮的自定义Checkbox各种复选框

    在原来有一篇文章写到了<CSS效果篇--纯CSS+HTML实现checkbox的思路与实例>.这篇文章主要写各种自定义的checkbox复选框,实现如图所示的复选框: 大致的html代码都 ...

  5. CSS效果集锦（持续更新中）

    高亮光弧效果 使用CSS3实现的一个高亮光弧效果,当鼠标hover到某一个元素上时,一道光弧从左向右闪过,效果如下: 代码如下: <!DOCTYPE html> <html lang ...

  6. 几个简单实用的css效果

    1.要使按钮具有3D效果,只要将它的左上部分边框设置为浅色,右下部分边框设置为深色即可. eg:#button { background: #888; border: 2px solid; borde ...

  7. 一些常用的html/CSS效果---小技巧

    我常用的重置样式表reset.css /*===============基础信息================*/ *{border: 0;padding: 0;margin: 0;} table ...

  8. html 和css 效果--整理集合篇

    一.如何用一张图片做背景图,并且图片自适应div的大小 background: url("../stu_wengu.png") center center no-repeat; b ...

  9. CSS效果：动态图标

    HTML: <html lang="en"> <head> <meta charset="UTF-8"> <meta ...

随机推荐

  1. hdu 3646

    DP  状态转移方程还是比较容易想到  关键问题是当前要攻击的怪兽的血量 dp[i][j] = max(dp[i-1][j]+第i只鸟不使用double可杀死的怪兽数, dp[i-1][j-1]+第i ...

  2. hdu 3778

    简单的dfs  但繁琐的可以了 0.0 #include<cstdio> #include<cstring> #include<algorithm> using s ...

  3. 注入攻击-SQL注入和代码注入

    注入攻击 OWASP将注入攻击和跨站脚本攻击(XSS)列入网络应用程序十大常见安全风险.实际上,它们会一起出现,因为 XSS 攻击依赖于注入攻击的成功.虽然这是最明显的组合关系,但是注入攻击带来的不仅 ...

  4. define中的：#，##，#@

    ［define中的:#,##,#@］ #define Conn(x,y) x##y #define ToChar(x) #@x #define ToString(x) #x (2)x##y表示什么?表 ...

  5. 如何在eclipse里使用git

    新版都自带git插件了.在项目上右键,选team,选share project,再选择git就可以了. 如果在本地使用git比较简单.如果要多人共享的使用git,那么需要专门的服务器,并提供ssh,这 ...

  6. 最新版FreeTextBox(版本3.1.6)在ASP.Net 2.0中使用简介

    http://www.cnblogs.com/kflwz/articles/1337310.html   1.下载最新版FreeTextBox(版本3.1.6),解压   FreeTextBox 3. ...

  7. SQLite入门与分析(四)---Page Cache之事务处理(2)

    写在前面:个人认为pager层是SQLite实现最为核心的模块,它具有四大功能:I/O,页面缓存,并发控制和日志恢复.而这些功能不仅是上层Btree的基础,而且对系统的性能和健壮性有关至关重要的影响. ...

  8. mpi冒泡排序并行化

    一.实验目的与实验要求 1.实验目的 (1)学会将串行程序改为并行程序. (2)学会mpich2的使用. (3)学会openmp的配置. (4)mpi与openmp之间的比较. 2.实验要求 (1)将 ...

  9. 情人节红攻瑰--Delphi版本

    在oschina上看到了用c写的红玫瑰, 以前只见过用js写的, 就随手用delphi翻译了c的代码, 效果还不错哈.... 原c作者jokeym贴子 http://www.oschina.net/c ...

  10. PNG优化/压缩

    我们总是希望 PNG 图像的容量能够小些.小些.再小些.优化 PNG 图像,可以用以下几个工具: 1.Optipng Optipng 是命令行工具,直接在其后追加所需优化的 PNG 图像即可 2.Pn ...