zoukankan      html  css  js  c++  java
  • bootstrap -- css -- 图片

    图片样式

    .img-rounded:添加 border-radius:6px 来获得图片圆角

    .img-circle:添加 border-radius:500px 来让整个图片变成圆形。

    img-circle优先级高于img-rounded

    <body>
    
    <img src="/wp-content/uploads/2014/06/download.png" 
       class="img-rounded">
    <img src="/wp-content/uploads/2014/06/download.png" 
       class="img-circle">
    
    </body>

    图片边框

    .img-thumbnail:添加一些内边距(padding)和一个灰色的边框。

    <img src="/wp-content/uploads/2014/06/download.png" 
       class="img-rounded img-thumbnail">
    <img src="/wp-content/uploads/2014/06/download.png" 
       class="img-circle img-thumbnail">

    图片自适应

    img-responsive:让图片支持响应式设计。 图片将很好地扩展到父元素。(图片可随页面大小自动调整宽度)

    .img-responsive {
        display: block;
        max-width: 100%;
        height: auto;
    }
          <img src="cinqueterre.jpg" class="img-circle img-thumbnail img-responsive" alt="Cinque Terre" width="304" height="236"> 
  • 相关阅读:
    cmd登录系统用户
    Js操作Cookie
    Tomcat 调优方案
    Oracle 服务启动关闭
    Mysql服务启动与关闭
    JSP中的隐含对象
    JSP指令
    Js的String对象
    js排序
    MyBatis系列目录--5. MyBatis一级缓存和二级缓存(redis实现)
  • 原文地址:https://www.cnblogs.com/hf8051/p/4472265.html
Copyright © 2011-2022 走看看