前端学习-UI框架学习-Bootstrap5-007-图像形状

菜鸟教程链接

圆角效果rounded

    <img src="./img/537.jpeg" class="rounded" alt="圆角效果" height="236"> 

椭圆rounded-circle

    <img src="./img/537.jpeg" class="rounded-circle" alt="拖延" height="236"> 

缩略图img-thumbnail

    <img src="./img/537.jpeg" class="img-thumbnail" alt="圆角效果" height="236"> 

图片对齐方式

使用 .float-start 类来设置图片左对齐，使用 .float-end 类设置图片右对齐:

  <div class="container mt-3">
    <h2>对齐</h2> 
    <p>使用 .float-start 类来设置图片左对齐，使用 .float-end 类设置图片右对齐:</p>         
    <img src="./img/537.jpeg" class="float-start" alt="圆角效果" height="236"> 
    <img src="./img/5372.jpeg" class="float-end" alt="圆角效果" height="236"> 
  </div> 

居中

使用 .mx-auto (margin:auto) 和 .d-block (display:block) 类来设置图片居中对齐：

    <template>
  <div class="container mt-3">
    <h2>居中</h2> 
    <p>使用 .mx-auto (margin:auto) 和 .d-block (display:block) 类来设置图片居中对齐：</p>         
    <img src="./img/537.jpeg" class="mx-auto d-block" alt="圆角效果" height="236"> 
    <img src="./img/5372.jpeg" class="float-end" alt="圆角效果" height="236"> 
  </div>
  
</template>

响应式图片

图像有各种各样的尺寸，我们需要根据屏幕的大小自动适应。
我们可以通过在 标签中添加 .img-fluid 类来设置响应式图片。
.img-fluid 类设置了 max-width: 100%; 、 height: auto; :

<template>
  <div class="container mt-3">
    <h1>响应式</h1> 
          
    <!-- <img src="./img/537.jpeg" class="mx-auto d-block" alt="圆角效果" height="236">  -->
    <img src="./img/5372.jpeg" class="img-fluid" alt="圆角效果" height="236"> 
  </div>
  
</template>