持续创作，加速成长！这是我参与「掘金日新计划 · 10 月更文挑战」的第29天，点击查看活动详情

前言

前面我们已经学习了bootrap5的网格系统，相信小伙伴们对网页排版已经跃跃欲试了，但是我们要排版的话也需要有诸如图片呀、文字之类的内容去排版，所以这篇文章我们来介绍下bootstrap5图片宽高尺寸控制。

图片尺寸控制

图片宽度控制

bootstrap5提供给我们的图片宽度控制的class名称有img-fluid。它赋予我们图片的效果是满版的一个效果。这个img-fluid它底层的css属性其实是用到的max-width:100%这个属性。这时候肯定有小伙伴要问了，这个img-fluid和我们之前用到的w-100都是100%那有什么区别呢？

其实我们的w-100表示的是我们的这个图片要和我们的父层容器一样宽，或者说要占到父层容器所允许的宽度的100%，为什么这样说呢？因为如果父层容器有padding的话这个padding的部分不是我们能够使用的。

而使用img-fluid是什么样的效果呢？图片的最大宽度不会超过图片本身的最大的一个宽度。假设我们图片宽度为500px，使用了img-fluid我们的图片最大宽度不会超过500px。

那在什么情况下会使用w-100，什么情况下会使用img-fluid呢？如果我们需要图片填满我们的父层的容器时，我们就需要使用w-100。而如果我们制作网页时，因为图片的解析度可能不是很好，不想将图片放大到出现模糊的状况，这时候我们就比较适合使用img-fluid。

下面简单快速的来给大家看看这两种不同的效果。

我们来创建一个引入bootstrap5的html文件，并且在其中定义一个容器，容器内放置一张图片。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="bootstrap-5.1.3-dist/css/bootstrap.min.css">
    <title>Document</title>
    <style>
       
    </style>
</head>

<body>
<div class="item">
    <img src="https://picsum.photos/500/200/?random=10">
</div>
    
    <script src="bootstrap-5.1.3-dist//js/bootstrap.bundle.min.js"></script>
</body>

</html>

我们这里的图片使用的是一张假图，然后呢我们的图片宽度是500px，高度是200px。我们先来看图片的原始大小。

微信截图_20221027222206.png

如果这时候我们使用class名称w-100看看会有什么样的效果。

<div class="item">
    <img src="https://picsum.photos/500/200/?random=10" class="w-100">
</div>

微信截图_20221027223013.png

我们再来看看使用img-fluid的效果。

<div class="item">
    <img src="https://picsum.photos/500/200/?random=10" class="img-fluid">
</div>

微信截图_20221027232901.png

我们就会发现图片变回了原来的大小。

如果我们给图片的父容器加上一个css属性为宽度300px会怎么样呢？

<div class="item" style="width:300px;">
    <img src="https://picsum.photos/500/200/?random=10" class="img-fluid">
</div>

微信截图_20221027233156.png

这时候图片就变小了，它的宽度就变成了父容器的大小300px。

父容器大小设置为1000px的话，我们来试试看什么效果。

<div class="item" style="width:1000px;">
    <img src="https://picsum.photos/500/200/?random=10" class="img-fluid">
</div>

微信截图_20221027233428.png

可以看到图片大小是它原本的大小。

除了我们使用过的w-100，其实还有w-25、w-50、w-75、w-auto分别对应的就是宽度25%、宽度50%、宽度75%和自动宽度。同样的我们也有高度的控制h-25、h-50、h-75、h-100、h-auto分别对应高度25%、高度50%、高度75%、高度100%、自动高度。

缩略图

在我们的bootstrap5中，还有一个控制图片样式的属性名是img-thumbnail。

这个class名称会给我们带来一个什么样的效果呢？我们直接来试下。

<div class="item">
    <img src="https://picsum.photos/500/200/?random=10" class="img-thumbnail">
</div>

微信截图_20221027233428.png

这个效果叫做缩略图，其实并没有将图片缩小的效果，只是在图片的外观加上了一个1px宽度的圆形边框。

这么看可能看不太出，我放大来看。

微信截图_20221027234301.png

就是这样的一个样式，平常我们使用的可能比较少，了解下就好。

总结

那我们关于bootstrap5的图片尺寸控制就讲到这里了。喜欢的小伙伴们多多支持，你们的支持就是我更新的动力。

Bootstrap5 图片尺寸控制

前言

图片尺寸控制

图片宽度控制

缩略图

总结