ubuntu – 同一主机的多个SSH私钥
489 2023-04-03 01:41:44
前段时间在做关于响应式的页面时,由于要兼容ie8,并且要保证图片等比缩放,且对图中内容的显示有要求,导致无法使用background-size等属性,最终放弃了使用background,用<img>
来替代。这样增加了代码量而且看起来很不clean。
但是很多情况下用background还是可以达到目的的,并且有解决方案(后面会提到)。下面我就详细讲下background-size。
background-size: auto ||
<length>
||<percentage>
|| cover || contain
取值说明:
1. auto | length | percentage
background-size: auto auto; // 默认值,即保持图片原始的宽和高background-size: auto; // 和上面的效果一样,省略的值为autobackground-size: 100px 50px; // 图片变为宽100px, 高50pxbackground-size: 100px; // 图片宽为100px, 高度auto,即高度自适应background-size: 100% 80%; // 宽度为容器宽的100%,高度为容器高度的80%background-size: 100%; // 宽度为容器宽度的100%,高度auto自适应
2. cover
cover
属性会对图片进行剪裁,当图片大小超过容器大小时。所以一般也会配合background-position
来决定显示图片内容的位置。
background-size: cover;
效果:
background-size: cover;background-position: center;
效果:
3. contain
contain
属性将图片缩小至以在容器中显示完整图片,但大多数情况下,由于容器宽高比例与图片比例不同,造成图片与容器上下或左右留边的情况。
background-size: contain;background-position: center;
效果:
虽然ie9+才支持background-size属性,但大家的智慧是无穷尽的,网上大家提供了几种解决方案,ie8及以下可以使用ie filters来模拟cover属性(据说某些情况下会有问题,本人测试过和cover效果还是有区别的):
-ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='path_relative_to_the_HTML_file', sizingMethod='scale')";
还有一种方式需引入一个jquery插件: jquery.backgroundSize.js
大概原理就是当浏览器不支持该属性时,用<img>
标签替换,感兴趣的同学可以试一下。
W3CPLUS
Supersize that Background, Please!