Bootstrap全局CSS样式之图片

响应式图片

在 Bootstrap 版本 3 中，通过为图片添加 .img-responsive 类可以让图片支持响应式布局。其实质是为图片设置了 max- 100%;、 height: auto; 和 display: block; 属性，从而让图片在其父元素中更好的缩放。

如果需要让使用了 .img-responsive 类的图片水平居中，请使用 .center-block 类，不要用 .text-center。

<img src="..." class="img-responsive center-block" alt="Responsive image">

图片形状

通过为 <img> 元素添加以下相应的类，可以让图片呈现不同的形状。

<img src="..." alt="..." class="img-rounded">
<img src="..." alt="..." class="img-circle">
<img src="..." alt="..." class="img-thumbnail">

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
    <link rel="stylesheet" href="bootstrap-3.4.1-dist/css/bootstrap.min.css">
    <script src="../js/jquery-3.3.1.min.js"></script>
    <script src="bootstrap-3.4.1-dist/js/bootstrap.min.js"></script>
</head>
<body>

    <div class="container">
        <div class="row">
            <div class="col-md-8 col-md-offset-2">
                <img src="../html&css/300x300.jpeg" alt="..." class="img-responsive center-block img-thumbnail">
                <!--边上有白框的正方形-->
                <img src="../html&css/300x300.jpeg" alt="..." class="img-responsive center-block img-circle">
                <!--圆形-->
                <img src="../html&css/300x300.jpeg" alt="..." class="img-responsive center-block img-rounded">
                <!--正方形-->
            </div>
        </div>
    </div>

</body>
</html>

while True: print('studying...')

相关阅读:
理财技术+人生感悟（转）
程序员每天每月每年需要做的事（转）
数据库常用函数(数字函数)
数据库之常用函数 (日期函数)
Qt初级-头文件
Qt初级-成员函数(二)
Qt初级-成员函数(一)
Qt初级-Qt格式(二)
Qt初级-Qt格式(一)
Qt初级-Qt继承表

原文地址：https://www.cnblogs.com/xuewei95/p/15071081.html