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中的图片居中效果。

相关阅读:
sql8（Leetcode1581进店却未进行过交易的顾客）
#【软件stm32cubeIDE下配置STM32F407uart1调试SBUS模块-学习笔记-基础样例-遥控小车与四轴模板】
new，malloc
【备忘】websocket学习之挖坑埋自己
【备忘/shell】hadoop 常见shell 与相关进程操作命令 ing
论文阅读之Reasoning Implicit Sentiment with Chain-of-Thought Prompting
在Spring Boot中使用进程内缓存和Cache注解
ABB眼中AI推动机器人创新的三大方向
什么是区块链节点提供商？为什么Web3开发者都需要它？
我是如何使用ChatGPT和CoPilot作为编码助手的

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