使用 background-image 时,必须要给当前容器定义个高度,这是谁都知道的方法。 但是这个高度如果写自适应时是不能写死的,原来我做自适应时,这个高度是写死的,然后使用 css3 的 media 不停的判断浏览器的宽度来调整容器的高度,这样有个明显的敝端,就是如果对某个尺寸的宽度没有定义时,布局就会错乱。 新的容器高度计算公式:图片
只需要添加 background-size: 100% 100%; 就行 div { background: url(); background-size: 100% 100%; }
<style type="text/css"> .demo { background: url(http://static.mukewang.com/static/img/logo_index.png) no-repeat; width: 300px; height: 140px; border: 1px solid #999; background-size:cover; } </style> </head> <body> <div class="demo"> </div> </body> </html> 1. 2. 3....
参考airbnb和hitour,得到以下demo,可以将图片高度固定后,图片自适应(特别适用于全屏的banner) <!DOCTYPE html><htmllang="en"><head><metacharset="UTF-8"><title>Document</title><styletype="text/css">.x{width:100%;height:700px;}.x div{background-repeat:no-repeat;background-size:100% 100%;he...
高度auto，反之则把IMG的高度设置成100%，宽度auto。在CSS里面添加img{margin:0 -100%}，用display:tabel-cell来做垂直居中(未实验)。background的实现方法(CSS3)：用background必须要CSS3才能自适应，代码是 background-size:cover;backgrond-attachment:fixed;background-position:center;效果一样 ...
1.宽度自适应： 1）在背景图img外层加一层div，并设置width:100%;注意最外层的body也要设置width:100%;<body style="width:100%"> <div style="width: 100%"> <div><img src="/images/img1.jpg" width="100%" height="auto"></div> </div></body>2.全屏铺满1）在背景...
background-image: url(./img/rs-cover.jpg); /* background-color: rgba(0 ,0 ,0 ,0.8 ); 直接这里来写覆盖的透明度没有效果,要在做一个div覆盖才有效果了*/ background-size: cover; /*图片大小缩小到指定的515px像素大小,简单来说就是图片可以根据窗口大小自适应*/ background-position: center cen...
可以通过使⽤图⽚，并设置宽度100%来⾃适应解决。<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style> .column { width: 100%;} .figure { width: 100%;} </style> </head> <body> <div class="column"> <img class="figure" src="img/1.jpg"/> </div...
若想解决这个自适应问题,其实很好解决,只需要在前端代码里加上这样css即可: 代码语言:javascript 代码运行次数:0 AI代码解释 1.main{2background:url(../assets/main.png)no-repeat;34/**添加以下css */5height:100%;//大小设置为100%6width:100%;//大小设置为100%7position:fixed;8background-size:100%...
网页高度自适应，body中background用url图片为什么不显示，怎么解决background: url(img/56f88d320001fc2d...