Javascript开发：Bootstrap设置响应式图片的两种实用方法

Bootstrap提供了一个名为`img-responsive`的类，可以用来设置响应式图片。这个类会自动调整图片的宽度，以适应其容器的宽度。 例如： ```html <img src="your-image-source.jpg" class="img-responsive" alt="Responsive image"> ``` 在这个例子中，图片的宽度会自动调整，以适应其容器的宽度。如果容器的宽度改变，图片的宽度也会相应地改变。 注意，这个类只会影响图片的宽度，不会影响图片的高度。如果你需要调整图片的高度，你可能需要使用CSS的`max-height`和`max-width`属性。 Bootstrap还提供了一个名为`img-fluid`的类，可以用来设置图片的宽度和高度都自动调整。这个类的效果和`img-responsive`类类似，但是它会同时调整图片的宽度和高度。 例如： ```html <img src="your-image-source.jpg" class="img-fluid" alt="Responsive image"> ``` 在这个例子中，图片的宽度和高度都会自动调整，以适应其容器的大小。如果容器的大小改变，图片的宽度和高度也会相应地改变。 ######[AI写代码神器 | 238点数解答 | 2023-11-09 01:23:26]