《bootstrap图片自适应、bootstrap图片居中》

在网页开发中，使用Bootstrap框架时，实现图片自适应和居中是很常见的需求。解决方案主要是借助Bootstrap提供的类以及CSS样式来达成。

一、使用Bootstrap自带类实现

（一）图片自适应

对于图片自适应，可以给<img>标签添加.img-fluid类。这个类设置了max - width:100%；height:auto;，使得图片宽度为父元素的100%，并且保持自身的宽高比例。

例如：
```html

</p>

<h3>（二）图片居中</h3>

<p>如果要让图片水平居中，可以将包含图片的容器设置为文本居中显示，即给父元素（如这里的<code>.col - 6）添加.text-center类。
```html



    

        

            
        
    

二、结合自定义CSS样式

（一）图片自适应

除了使用.img - fluid类，我们也可以自己定义一个类来实现图片自适应。例如：
css
.custom-img {
width: 100%;
height: auto;
}

然后在HTML中使用：
```html

</p>

<h3>（二）图片居中</h3>

<p>为了让图片垂直和水平都居中，可以利用Flex布局。给父元素设置<code>display:flex;justify - content:center;align - items:center;height:300px;(假设高度为300px，可根据实际调整)。
```html



    .img-container{
        display: flex;
        justify-content: center;
        align-items: center;
        height: 300px;
    }



    

        

            
        
    

通过以上几种思路，就可以很好地在Bootstrap项目中实现图片的自适应和居中效果，满足不同的页面布局需求。