zoukankan      html  css  js  c++  java
  • 使用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- 100%; 和 height: auto; 属性,可以让图像按比例缩放,不超过其父元素的尺寸。

    .img-responsive {
    display: inline-block;
    height: auto;
    max- 100%;
    }
    这表明相关的图像呈现为 inline-block。当您把元素的 display 属性设置为 inline-block,元素相对于它周围的内容以内联形式呈现,但与内联不同的是,这种情况下我们可以设置宽度和高度。

    设置 height:auto,相关元素的高度取决于浏览器。

    设置 max-width 为 100% 会重写任何通过 width 属性指定的宽度。这让图片对响应式布局的支持更友好。

    本文仅提供参考,是本人闲时所写笔记,如有错误,还请赐教,作者:阿蒙不萌,大家可以随意转载

  • 相关阅读:
    文件下载工具类
    spring boot 2.0+中整合redis 方法缓存Cache和普通缓存两种
    spring boot 2.0+ 整合RabbitMq
    spring boot2.0+中添加全局异常捕获
    spring boot2.0+ 中配置log4j日志
    spring boot + websoket @ServerEndpoint中多个参数的写法
    在spring mvc中利用spring-session+redis实现分布式session
    spring mvc 中整合redis记录
    Spring 中使用redis缓存方法记录
    java 类与对象
  • 原文地址:https://www.cnblogs.com/huchong-bk/p/11584188.html
Copyright © 2011-2022 走看看