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

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>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

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

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>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

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

03-图像对齐方式

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

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

使用Bootstrap的mx-auto类：

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

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

使用Flexbox布局：

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

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

这将使包含图片的

元素在水平和垂直方向上都居中对齐。

使用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>
1
2
3
4
5
6
7

这将使图片在其父列中水平居中对齐。

选择其中一种方法取决于你的项目需求和布局结构。希望这些方法能帮助你实现Bootstrap中的图片居中效果。

相关阅读:
应届毕业生谈毕业的故事
A Philosophy of Software Design读书笔记——不同的层需要不同的抽象
换钱的最小货币数－Java：原问题的经典动态规划方法
Spring cloud stream binder kafka 常用配置
SpringCloud微服务实战——搭建企业级开发框架（四十九）：数据字典注解的设计与实现
14：00面试，15：00就出来了，问的问题过于变态了。。。
前端面试题(三)
【虚幻引擎】UE4/UE5 后期处理盒子（PostProcessVolume）
基于视觉识别的自动采摘机器人设计与实现
打破行业界限，实现共赢的商业模式

原文地址：https://blog.csdn.net/wenhao_ir/article/details/132766618