bootstrap3的img-thunbnail和img-responsive

本文介绍如何使用 Bootstrap 3 中的 .img-responsive 类实现图片的响应式布局,使其能够根据屏幕尺寸进行适配。同时展示了不同样式类如 .img-rounded 和 .img-thumbnail 的应用效果。

新增的img-responsive

3.2版本                                 3.0版本

.img-polaroid
.img-thumbnail

响应式图片


通过添加.img-responsive class可以让Bootstrap 3中的图片对响应式布局的支持更友好。其实质是为图片赋予了max-width: 100%;和height: auto;属性,可以让图片按比例缩放,不超过其父元素的尺寸。

<img src="..." class="img-responsive" alt="Responsive image">

图片

为<img>元素增加不同的class,就可以轻松的改变其样式。
跨浏览器兼容性

你要知道,Internet Explorer 8是不支持圆角矩形的。


140x140 140x140 140x140


代码:

  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  
  2. <html xmlns="http://www.w3.org/1999/xhtml">  
  3. <head>  
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />  
  5. <link rel="stylesheet" href="dist/css/bootstrap.css">  
  6. <script type="text/javascript" src="dist/js/jquery.js"></script>  
  7. <script type="text/javascript" src="dist/js/bootstrap.js"></script>  
  8. <title>无标题文档</title>  
  9. </head>  
  10.   
  11. <body style="margin:200px;">  
  12. <div style="width:980px; height:999px;">  
  13. <img src="images/1.jpg" alt="这个是img-rounded" class="img-rounded img-responsive" />  
  14. <img src="images/2.jpg" alt="这个是img-circle" class="img-circle img-responsive" />  
  15. <img src="images/3.jpg" alt="这个是img-thumbnail" class="img-thumbnail img-responsive" />  
  16. </div>  
  17. </body>  
  18. </html>  

效果图:

<think>我们正在讨论的是关于Bootstrap中的`img-fluid`类。根据引用[1]中的描述: > 在img中 class:“img-fluid” 这个类是bootstrap提供的图片标签的样式,主要是绑定图片自适应的问题,会去自适应图片比例(fluid:填充)。 alt:提示作用,当图片未加载时显示一行文字提示。 style=“max-height:168px;”:限制最大高度,如果没有限制图片会把表单撑的非常高。 因此,`img-fluid`是Bootstrap框架中用于图片的一个类,它的主要作用是使图片具有响应式特性,即能够根据父容器的大小自动调整图片的尺寸,同时保持图片的原始宽高比例(即不会变形)。这样,图片在不同设备上(如桌面、平板、手机)都能良好地显示,不会超出容器范围。 具体来说,`img-fluid`类应用了以下CSS样式: ```css .img-fluid { max-width: 100%; height: auto; } ``` - `max-width: 100%`:确保图片的最大宽度不会超过其父容器的宽度。 - `height: auto`:高度自动调整,以保持图片的原始宽高比例。 这样,当父容器变小时(例如在移动设备上),图片会按比例缩小,而不会溢出容器或导致布局错乱。 在引用[1]的示例中,还配合使用了`style="max-height:168px;"`来限制图片的最大高度,这是为了避免图片过高而破坏表单布局。但请注意,`img-fluid`本身并不设置最大高度,如果需要限制高度,可以额外添加样式。 **总结`img-fluid`的作用:** 1. **响应式图片**:自动适应不同屏幕尺寸。 2. **保持比例**:图片不会因拉伸而变形。 3. **防止溢出**:确保图片不会超出其父容器。 在网页开发中,使用`img-fluid`可以简化响应式图片的处理,无需编写额外的CSS代码,提高开发效率。 §§相关问题§§ 1. Bootstrap中还有哪些常用的图片类? 2. 如何在不使用Bootstrap的情况下实现响应式图片? 3. 为什么需要设置`max-height`来限制图片高度?除了`max-height`还有哪些方法可以控制图片尺寸? 4. `img-fluid``img-responsive`有什么区别?(注意:在Bootstrap 3中用的是`img-responsive`,在Bootstrap 4及以后改名为`img-fluid`)</think>### `img-fluid`的含义及作用 `img-fluid` 是 Bootstrap 框架中用于图片响应式设计的 CSS 类,其核心作用是实现图片的自适应显示。主要功能如下: 1. **响应式缩放** 通过 CSS 属性 `max-width: 100%` `height: auto` 实现: ```css .img-fluid { max-width: 100%; /* 宽度不超过父容器 */ height: auto; /* 高度按比例自适应 */ } ``` 效果:当容器宽度变化时(如手机/平板/PC切换),图片自动按比例缩放,**避免横向溢出或变形**[^1]。 2. **跨设备兼容** 在移动端布局中(如 Bootstrap 的 `col-*` 栅格系统),图片会随父容器宽度压缩而自动调整尺寸,防止因固定宽高导致的**布局错位或重叠**[^1]。 3. **性能优化** 常配合 `max-height` 使用(如 `style="max-height:168px"`),避免大尺寸图片过度拉伸导致**页面高度失控**[^1]。 ### 实际应用场景 - **表单图片上传区域** ```html <div class="row justify-content-center"> <img src="upload.jpg" class="img-fluid" alt="预览图" style="max-height:168px"> </div> ``` 确保上传的图片在不同屏幕尺寸下保持比例且不破坏表单布局[^1]。 - **响应式文章配图** ```markdown ![配图描述](image.jpg){:class="img-fluid"} ``` 在博客/新闻等内容页面中,图片自动适应阅读区域[^2]。 - **商品展示页** 电商网站的商品图自动适配商品卡片容器,避免图片溢出。 > ⚠️ **注意**:`alt` 属性需始终配合使用(如 `alt="产品图"`),这是无障碍访问的强制要求,同时在图片加载失败时提供文字提示[^1]。 ---
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值