使用padding-top:(percentage)实现响应式背景图片

我门都知道,处理在响应性布局的时候,背景图片都是等比例缩放,比如上面的使用图片的情况,使用<img /> 引入的图片的话,那么设置她们的width属性为100%;<img src=”” width=”100%”/> 的话,高度就会等比例缩放,这是图片,但是如果是背景图片呢?我门之前的项目中的常见的做法是根据css3媒体查询的方法来做的,根据不同手机的分辨率等不同,来等比例缩放背景图的高度,虽然这种方式是可以解决问题的,但是这种通过人肉的方式来进行设置并不好,也很繁琐,今天我门来学习使用padding-top这么一个属性来设置了;

实现的基本原理:将使用到保持元素的宽高比的技巧,为元素添加垂直方向的padding-top的值,使用百分比的形式,这个值是相对于元素的宽而定的,比如我上面的一张图片的宽度是1024px,高度为316px;那么现在的

padding-top = (高度 / 宽度 )* 100% = (316 / 1024)* 100% =  30.85%;

但是仅仅对图片高度和宽度缩放的放还不够,我门还必须添加 background-size:cover, 使这个属性让背景铺满元素的,但是IE8及以下不支持该属性,因此为了兼容IE下面的浏览器,我门还需要再加一个属性 background-position: center ; 同时我门也要保证 图片的宽度最大等于父容器的宽度;因此下面的HTML代码如下:

<h3>使用padding-top实现响应性图片(图片的宽度是1024px,高度是316px)</h3>
 <div class="column">
       <div class="figure"></div>
  </div>

css代码如下:

复制代码
.column{
        max-width: 1024px;
 }
 .figure {
         padding-top:30.85%; /* 316 / 1024 */
         background: url("http://images2015.cnblogs.com/blog/561794/201603/561794-20160310002800647-50077395.jpg") no-repeat;
          background-size:cover;
          background-position:center;
    }
复制代码

效果如下:

 

first-child是css3中的控制器,意味着选择统计元素的第一个元素,但是今天在做网站的时候遇到first-child不起作用,于是就搜索了一下,找到了问题所在。
我们先看一个例子:
css代码:

1
2
3
4
<style>
.dm p:first-child { background:#09C;color:#fff}
.dm p:last-child { background:#09C;color:#fff}
</style>

html代码:

1
2
3
4
5
6
7
8
<div class="dm">
<span>第一行</span>
<p>第二行</p>
<p>第三行</p>
<p>第四行</p>
<p>第五行</p>
<span>最后一行</span>
</div>

如上代码运行之后,这里面的first-child与last-child没有起到任何的作用。
先不说原因,我们把html代码改一下:

1
2
3
4
5
6
7
8
<div class="dm">
<p>第一行</p>
<p>第二行</p>
<p>第三行</p>
<p>第四行</p>
<p>第五行</p>
<p>最后一行</p>
</div>

怎么样,这次起作用了吧。
看到这两个的区别了吗?
第一个例子里的第一个标签和最后一个标签都是span,而我们寻找的first-child和last-child都是P,[如果父元素的第一个元素或者最后一个元素不是寻找的标签的话,会不起作用],这样说着有点拗口,按上面的例子来说如果父元素.dm寻找的first-child与last-child是P,如果不是P的话会不起作用,大家需要注意这一点。

 

很早就遇到过这么个小问题,但由于其并未影响到实际作用和美观就没有正面解决它,现在,我们来试着解决它。

写一个Button,有两种方式:其一,直接button标签;其二,input type=”button”。

不管哪种方式,Button的宽度在IE6、7下总是不能完美,接下来我们演示一个普通的Button,你可以用IE6或者IE7浏览器看看其显示宽度,然后对比Chrome或者IE8等浏览器,你会发现Bug的所在。

1、一个普通的Button:

可以很直接的看到Button的两边有空隙,当然,这个空隙是无法用padding:0来解决的。

通常,不少同学会想到给该Button定义一个width:100px。

2、width:150px的Button:

.demo-button01{width:150px;}

恭喜,你是对的。但是,我们必须这个Button自适应宽度呢?

好吧,加个width:auto试试。

3、width:auto的Button:

.demo-button02{width:auto;}

哦也,还是不行!下面试试网上提供的一种方法。

4、width:auto;overflow:visible;的Button:

.demo-button03{width:auto;overflow:visible;}

Yes,可行!还有一个方法如下:

.demo-button04{width:1;overflow:visible;}

但个人觉得width:1的写法很二,所以摒弃之。

结语:

如果你要问问什么IE6、7下会出现这样的问题,我说是微软很二。解决Button自适应宽度的最佳办法是width:auto;overflow:visible;

 

在div中直接插入图片,如果是在ie6下的话,会看到插入了图片的div和下一个div会产生一定的距离。一般来说使用了float就能解决这个产生间距的问题,可是在ie6下还是没解决到,后来考虑到是否是行距的问题呢,所以添加了

_line-height:1px ;_font-size:1px , 发现问题解决了。
  原来在ie6下插入图片会产生行高的BUG造成的,默认高度为17PX,所以我将在ie6浏览时 图片所在的div的行高和字体大小都设置为1px。
 

有时候我们在做网站的时候,会遇到标题文字内容溢出或者说是超出宽度的问题,这时候大家一般会直接用截断的方法吧,就是限定宽度高度,然后加overflow:hidden。这样做虽然可以解决问题,不够再美观上可能就不太好看,

那这时候 我们是不是可以想到,如果溢出的内容用省略号代替的话, 是不是会美观很多了咧。

<div>这是总共二十个文字的一个段子,可以截断文字吗</div>

现在直接用css代码就可以实现:

1.先设定字数宽度

2.文字不换行

3.溢出隐藏

4.使用text-overflow 设定效果

css代码如下:

div{  width:20em;

white-space:nowrap;

overflow:hidden;

text-overflow:ellipsis;

}

ps :旧版本的ff不支持 text-overflow属性,不过7.0之后就支持了

 

今天在检查网站的时候,发现网站的友情链接那里,在ie6和ie7浏览器下,居然会出现同一段字里面 因为宽度不够而在段内自动换行的问题,

在ie8和谷歌浏览器下面就不会出现(整体宽度不够,整段字就会换行,这才是要的显示效果)。

这时候我想到了,让文字不自动换行就好了, 针对容器添加了

#jyhj a{float:left; display:inline; line-height:25px; font-size:12px; margin-left:15px; white-space:nowrap; }

添加了white-space:nowrap 之后, 这样就强制一段文字不会自动换行了。

那想自动换行也可以:

div{
word-wrap: break-word;
word-break: normal;
}

强制英文单词断行的写法:

div{
word-break:break-all;
}
© 2012 Ai-WEB的博客 Suffusion theme by Sayontan Sinha