bootstrap 图片

《bootstrap 图片》

解决方案简述

Bootstrap 是一个流行的前端框架，它提供了简单而强大的工具来处理网页中的图片显示问题。通过使用 Bootstrap 的类和组件，可以轻松实现响应式图片布局、图片对齐、圆角图片、圆形图片等效果。这不仅提高了开发效率，还确保了网页在不同设备上的良好展示。

一、响应式图片

为了使图片能够根据屏幕大小自动调整尺寸，在 img 标签中添加 .img-fluid 类即可。
html <img src="example.jpg" class="img-fluid" alt="Responsive image">
这个简单的设置可以让图片宽度为100%父元素宽度，并且保持原始比例。

二、图片形状

1. 圆角图片

如果想要给图片添加圆角效果，只需要加上 .rounded 类：
html <img src="example.jpg" class="rounded" alt="">

2. 圆形图片

对于需要圆形展示的头像等情况，可以使用 .rounded-circle 类：
html <img src="example.jpg" class="rounded-circle" alt="">

三、图片对齐

有时候我们需要让图片在容器内按照特定位置对齐。

1. 左对齐

html <img src="example.jpg" class="float-start me-3 mb-3" alt="">
其中 float-start 表示左浮动（在 RTL 布局中会变成右浮动），me - 3 和 mb - 3 分别是右边距和下边距，用于调整间距。

2. 右对齐

html <img src="example.jpg" class="float-end ms-3 mb-3" alt="">

3. 居中对齐

html</p>

<div class="text-center">
    <img src="example.jpg" alt="" class="img-fluid">
</div>

<p>```
这里用 div 包裹 img 并给 div 添加 text - center 类，从而实现居中效果。</p>

<h2><h2>四、图片图床与加载优化</h2></h2>

<p>除了上述样式方面的操作，实际项目中还需要考虑图片的加载速度等问题。可以将图片上传到专业的图床平台获取链接，同时利用懒加载技术提高页面性能。例如结合 IntersectionObserver API 实现懒加载：
```javascript
const observer = new IntersectionObserver((entries) => {
  entries.forEach(entry => {
    if (entry.isIntersecting) {
      const img = entry.target;
      img.src = img.dataset.src;
      observer.unobserve(img);
    }
  });
});</p>

<p>document.querySelectorAll('img[data-src]').forEach(img => {
  observer.observe(img);
});
<code>
在 html 中：
html