使⽤CSS设置背景图⽚，图⽚⽐较⼤，完全显⽰在⼀个DIV中
做的时候想要边框为⽐较好看的样式，需要UI切图并且放在div中，看起来会好看点
像这样的，我随便挑选了⼀个，UI帮我切图出来
需要把这个图⽚填到相应的div⾥⾯，但是很显然碰到⼀个问题，图⽚太⼤，⽽且放进去以后还不是响应式的
那么解决问题的就来了：
background:url(1.jpg);
-webkit-background-size: 100px 60px;
这样还不是响应式应该怎么办呢
IMG加载的图⽚width设置为100%，⾼度会按照width的值⾃动等⽐率缩放
背景图⽚⽤background-size 属性来控制缩放
background:#00ff00 url(img.jpg) no-repeat;
background-size:60% 80%;
-moz-background-size:60% 80%;
-webkit-background-size:60% 80%;
-o-background-size:60% 80%;
我当时写的是
-webkit-background-size:100% 100%;
就完成相要的效果了
再放上相关的
响应式图像
<img src="..." class="img-responsive" alt="响应式图像">
通过添加 img-responsive class 可以让 Bootstrap 3 中的图像对响应式布局的⽀持更友好。
接下来让我们看下这个 class 包含了哪些 css 属性。
在下⾯的代码中，可以看到img-responsive class 为图像赋予了 max-width: 100%; 和 height: auto; 属性，可以让图像按⽐例缩放，不超过其⽗元素的尺⼨。
.img-responsive {
display: inline-block;
height: auto;
max-width: 100%;
cssclass属性}
这表明相关的图像呈现为 inline-block。当您把元素的 display 属性设置为 inline-block，元素相对于它周围的内容以内联形式呈现，但与内联不同的是，这种情况下我们可以设置宽度和⾼度。
设置 height:auto，相关元素的⾼度取决于浏览器。
设置 max-width 为 100% 会重写任何通过 width 属性指定的宽度。这让图⽚对响应式布局的⽀持更友
好。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。