响应式图像--图片自适应大小

标签: 响应式 图片
14人阅读 评论(1) 收藏 举报
分类:
Foreword

      
      做项目的过程中遇到了一个图片拉伸的问题,做的是手机端的页面,当让其以电脑端页面显示的时候,图片被拉伸的有那么点丑!所以改改它!
      

Why

      
为什么会出现这样的情况呢?

1、因为图片是放在盒子模型中的,让图片填满整个盒子的方式来实现,但这样图片会根据盒子的大小拉伸,导致显示变形
2、同一个模块,电脑端和手机端的盒子模型大小是不一样的
3、因为上面的1 2点,所以图片就被拉伸了
      
原图片
原图片
      
被拉伸后的图片
被拉伸后的图片

      

Solution–bootstrap 中的响应式图像

      
1、响应式图像
      
根据不同的屏幕分辨率,和设备像素比来尽可能选择高分辨率的图片。
或者换个角度来说,当在小屏幕上不需要高清图或大图,这样我们用小图代替,就可以减少网络带宽啦。(当然小编在项目中只是用到了自适应,对于其他的还了解甚少)

2、如何做
      
代码如下:

<img src="..." class="img-responsive" alt="响应式图像">
.img-responsive {
  display: inline-block;
  height: auto;
  max-width: 100%;
}


(1)display:inline-block 元素相对于它周围的内容以内联形式呈现,但与内联不同的是,这种情况下我们可以设置宽度和高度。
(2) height:auto,相关元素的高度取决于浏览器。
(3)max-width : 100% 会重写任何通过 width 属性指定的宽度。这让图片对响应式布局的支持更友好。
      
当然这里用到的就是极小的一部分,之后根据需要慢慢学习吧!给大家推荐一个网站,个人觉得还不错:
MDN web docs

查看评论

响应式web设计--图片大小自适应的三种方法

整理于《响应式web设计 HTML5和CSS3实践指南》一书 ①基于宽度百分比 对于上面的图片,我们可以将它所属的div宽度用百分比固定,然后让图片自适应div的宽度和高度.img-wap{...
  • u013830811
  • u013830811
  • 2015-10-18 11:05:24
  • 2198

HTML5----响应式(自适应)网页设计

第一步:
  • damys
  • damys
  • 2014-04-23 14:55:15
  • 129423

响应式图像--图片自适应大小

Foreword             做项目的过程中遇到了一个图片拉伸的问题,做的是手机端的页面,当让其以电脑端页面显示的时候,图片被拉伸的有那么点丑!所以改改它!        Why   ...
  • Sunny5319
  • Sunny5319
  • 2018-04-16 21:36:30
  • 14

<CSS强制图片自适应大小>

  • 2010年07月14日 10:43
  • 583B
  • 下载

响应式图片的3种解决方案

个人总结:在当前响应设计和自适应设计的流行下,很多web 应用往往都兼容手机、平板和PC,其中一个让人比较头痛的问题就是图片的加载了。不同平台显然不可能用同一张大的图片,这样子不但浪费手机流量、影响网...
  • qq_34986769
  • qq_34986769
  • 2016-10-13 13:57:30
  • 1541

html 文字和图片实现自适应

文字自适应在html页面加入 图片自适应加入 img{width:100%}
  • easyboot
  • easyboot
  • 2016-12-26 10:19:23
  • 1570

bootstrap响应式图片自适应图片大小

bootstrap响应式图片的正确的设置是在img上面加上两个类就可以了。 如果是在内容页里面的话,直接用js给每个img加上属性就可以了。 $(window).load(function(){ ...
  • GLyihu
  • GLyihu
  • 2017-08-30 10:56:49
  • 488

listbox 实现<em>图片</em>大小<em>自适应</em>展示

listbox 实现图片大小自适应展示超好,点击下一张,<em>图片自适应</em> 综合评分:0 收藏...HTML5<em>响应式</em>自适应产品展示<em>网站</em>织梦模板 立即下载 上传者: sinat_35325296 时间...
  • 2018年04月17日 00:00

Bootstrap响应式图片的进一步处理

最近在做一个项目,首页特别简单 这是半成品,但是刚开始的时候使用图标的时候,遇到过一个较大的问题,接下来与大家分享。 既然是响应式布局,肯定我们的图片必须要有 class="img-respons...
  • Brave_Coder
  • Brave_Coder
  • 2015-12-16 19:08:35
  • 4144
    个人资料
    专栏达人 持之以恒
    等级:
    访问量: 3万+
    积分: 5005
    排名: 7091
    博客专栏
    最新评论