Bootstrap与响应式图片设计相关的类

昊虹AI笔记

于 2023-09-09 21:50:42 发布

阅读量454

点赞数

分类专栏： Bootstrap 文章标签： bootstrap 前端 html

本文链接：https://blog.csdn.net/wenhao_ir/article/details/132766618

版权

Bootstrap 专栏收录该内容

50 篇文章 4 订阅

订阅专栏

01-图像随父元素的同步缩放

可以利用类 .img-fluid 实现图像随父元素同步缩放。

示例代码如下：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>图像的同步缩放</title>
    <meta name="viewport" content="width=device-width,initial-scale=1, shrink-to-fit=no">
    <link rel="stylesheet" href="bootstrap-4.5.3-dist/css/bootstrap.css">
    <script src="jquery-3.5.1.slim.js"></script>
    <script src="bootstrap-4.5.3-dist/js/bootstrap.min.js"></script>
</head>
<body class="container">
<h2>图像的同步缩放</h2>
<img src="1.jpg" class="img-fluid">
</body>
</html>

运行效果如下图所示：
在这里插入图片描述

02-给图像加上圆角边框,让图像看起来像缩略图

示例代码如下：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>图像加边框</title>
    <meta name="viewport" content="width=device-width,initial-scale=1, shrink-to-fit=no">
    <link rel="stylesheet" href="bootstrap-4.5.3-dist/css/bootstrap.css">
    <script src="jquery-3.5.1.slim.js"></script>
    <script src="bootstrap-4.5.3-dist/js/bootstrap.min.js"></script>
</head>
<body class="container">
<h2>图像加边框</h2>
<img src="2.jpg" class="img-thumbnail">
</body>
</html>

运行效果如下图所示：
在这里插入图片描述

03-图像对齐方式

暂略，有需要的话直接问chatgpt吧，可以优先考虑类 mx-auto。

问：利用Bootstrap开发前端界面，想实现图片的居中效果，可以怎么实现？
要在Bootstrap中实现图片的居中效果，你可以使用以下方法之一：

使用Bootstrap的mx-auto类：

Bootstrap提供了一个名为mx-auto的内置类，它可以将元素水平居中。将这个类应用于图片元素即可实现图片的水平居中效果，例如：

<img src="your-image-source.jpg" alt="Your Image" class="mx-auto">

使用Flexbox布局：

Bootstrap默认使用Flexbox布局，你可以使用Flexbox属性来实现更多的居中效果。将以下类应用于包含图片的父元素：

<div class="d-flex justify-content-center align-items-center">
    <img src="your-image-source.jpg" alt="Your Image">
</div>

这将使包含图片的<div>元素在水平和垂直方向上都居中对齐。

使用Grid系统：

如果你在使用Bootstrap的Grid系统来布局页面，你可以将图片包含在一个具有text-center类的列（column）中，以实现水平居中效果。例如：

<div class="container">
    <div class="row">
        <div class="col-12 text-center">
            <img src="your-image-source.jpg" alt="Your Image">
        </div>
    </div>
</div>