CSS实例教程:图片宽高自适应固定边框

2016-02-20 00:22 32 1 收藏

下面这个CSS实例教程:图片宽高自适应固定边框教程由图老师小编精心推荐选出,过程简单易学超容易上手,喜欢就要赶紧get起来哦!

【 tulaoshi.com - Web开发 】

以前的解决方法主要是利用js来实现,但用过的人都知道该办法有点繁琐。还有一种是在外部容器定义over-flow:hidden。但这种办法只会切割图片而不会自动适用。

关键在于:max-width:780px;以及下面那行。

固定像素适应:

(本文来源于图老师网站,更多请访问http://www.tulaoshi.com/webkaifa/)

以下是引用片段:
style type="text/css"
!--
body {
font-size: 12px;
text-align: center;
margin: 0px;
padding: 0px;
}
#pic{
  margin:0 auto;
  width:800px;
  padding:0;
  border:1px solid #333;
  }
#pic img{
    max-width:780px;
    width:expression(document.body.clientWidth 780? "780px": "auto" ); 
    border:1px dashed #000;
}
-->
/style
/head
body
div id="pic"
img src="/articleimg/2006/03/3297/koreaad_10020.jpg"/
/div
/body
/html

 

(本文来源于图老师网站,更多请访问http://www.tulaoshi.com/webkaifa/)

百分比适应:
以下是引用片段:
style type="text/css"
!--
body {
font-size: 12px;
text-align: center;
margin: 0px;
padding: 0px;
}
#pic{
  margin:0 auto;
  width:800px;
  padding:0;
  border:1px solid #333;
  }
#pic img{
    max-width:780px;
    width:expression(document.body.clientWidthdocument.getElementById("pic").scrollWidth*9/10? "780px": "auto" );
border:1px dashed #000;
}
-->
/style
/head
body
div id="pic"
img src="/articleimg/2006/03/3297/koreaad_10020.jpg"/
/div
/body
/html

来源:http://www.tulaoshi.com/n/20160220/1631747.html

延伸阅读
做为一个前端设计人员,对于产品展示页面的设计一定不会陌生,其中产品图片摆放是必定经历的一步,并且水平居中和垂直居中又是最多的。有时需要产品图片水平垂直居中显示,这种展示用CSS来实现又是比较棘手的一件事,我想很多前端攻程师都有研究过或者说是搜索过这些方法吧。很多网站都是使用table来实现产品图片垂直居中,实现也是相当的方便...
标签: Web开发
CSS(Cascading Stylesheets,层叠样式表)是一种制作网页的新技术,现在已经为大多数的浏览器所支持,成为网页设计必不可少的工具之一。使用CSS能够简化网页的格式代码,加快下载显示的速度,也减少了需要上传的代码数量,大大减少了重复劳动的工作量。尤其是当你面对的是有数百个网页的站点时,CSS简直象是神对我们的恩赐! 前言 ...
标签: Web开发
十二、控制BOX的样式 样式表规定了一个容器BOX,它将要储存一个对象的所有可操作的样式。包括了对象本身、边框空白、对象边框、对象间隙四个方面。 为了大家更好地理解这些属性的意义,以及互相之间的关系,请看下面这个图示: 1.边框空白(MARGIN) 如图所示,位于BOX模型的最外层,包括四项属性。 格式分别如...
标签: Web开发
自适应高度的问题,采用 Div + CSS 进行三列或二列布局时,事先不知道具体高度,只能根据内容的增减自适应高度,要使两列(或三列)的高度相同,用 Table 很容易实现,但采用 Div + CSS 就显得比较麻烦了。按照一般的做法,大都采用背景图填充或 JS 脚本的方法使高度相同,但这些都不是最好的办法,我认为… 下面介绍采用“隐藏容器溢...
今天群里工友提了一个需求,让固定宽度的子元素,在不确定宽度的容器内水平居中(自适应):UL 宽度不固定;LI 宽度固定,LI 是一个块。看起来还挺简单的。但大家为什么一直讨论不断。奇怪,实现了一下。发现其实还是很简单的。还是没有超出原来的解决方案,即使用 display:inline-block 。实际要实现的效果应该是下面这个样子:  ...

经验教程

481

收藏

78
微博分享 QQ分享 QQ空间 手机页面 收藏网站 回到头部