佛山自适应网站定制之图片自适应大小


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


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


1、因为图片是放在盒子模型中的,让图片填满整个盒子的方式来实现,但这样图片会根据盒子的大小拉伸,导致显示变形 

2、同一个模块,电脑端和手机端的盒子模型大小是不一样的 

3、因为上面的1 2点,所以图片就被拉伸了 !  


1,响应式图像

根据不同的屏幕分辨率,和设备像素比来尽可能选择高分辨率的图片。 

或者换个角度来说,当在小屏幕上不需要高清图或大图,这样我们用小图代替,就可以减少网络带宽啦。(当然小编在项目中只是用到了自适应,对于其他的还了解甚少)


2、如何做

代码如下:


响应式图像1

.img-responsive {  display: inline-block;  height: auto;  max-width: 100%;}12345


(1)display:inline-block 元素相对于它周围的内容以内联形式呈现,但与内联不同的是,这种情况下我们可以设置宽度和高度。 

(2) height:auto,相关元素的高度取决于浏览器。  

(3)max-width : 100% 会重写任何通过 width 属性指定的宽度。这让图片对响应式布局的支持更友好。 


以上就是佛山自适应网站定制之图片自适应大小,希望能对大家有所帮助。 

       


分类:行业动态
本文链接:佛山自适应网站定制之图片自适应大小
上一篇:佛山微信小程序的价值和优势
下一篇:佛山官网定制开发的具体流程有哪些

实时头条

观察行业视觉,用我们专业的角度,讲出您的心声
  • 意合云头条
  • 行业动态
  • 营销推广
MORE+
意合云2021年度冬季聚会 意合云2021年度冬季聚会 广东的冬天虽说不太冷,但在这阳光明媚,舒风凉凉的天气,是很适合外出聚餐活动。组织这次聚会让大家放松心情的同时,互相联系感情,更好地为下一阶段工作配合默契。活动场...
2021-12-15
小姐姐入职意合云一周年啦!!! 小姐姐入职意合云一周年啦!!! 伴随着时光的脚步,走过了春夏秋冬 这一年,你对业务的日渐熟悉 工作岗位上的每一次尝试 都激发意合云共同前进 意合云为小姐姐庆祝周年 “1”代表起航,要到达远方 ...
2021-11-02
意合云秋游记之海陵岛两天两夜 意合云秋游记之海陵岛两天两夜 海陵岛两天游 虽然已是秋天,但还是骄阳似火,最好不过选择到海边吹吹海风,看潮涨潮落,可以靠海居住,躺在床上也能聆听海浪声。 9月10日晚,佛山公司团队8点出发,...
2021-09-14
佛山百度爱采购之网络推广的途径有哪些 佛山百度爱采购之网络推广的途径有哪些 佛山百度爱采购之网络推广的途径有哪些随着互联网的发展,网络推广也变得越来越流行,企业通过网络推广在互联网中形成良性竞争的环境,为企业品牌和产品服务的推广提供更便...
2022-06-27
佛山定制开发之网站建设界面的重要性 佛山定制开发之网站建设界面的重要性 佛山定制开发之网站建设界面的重要性一个好的界面设计应该拥有高转化率且方便用户使用,换句话说:既能达到商业目的又能满足方便易用的要求。1. 使用单栏布局代替多栏布...
2022-06-13
佛山小程序开发之小程序开发如何变现 佛山小程序开发之小程序开发如何变现 佛山小程序开发之小程序开发如何变现相信,大家或多或少都会接触到一些小程序。但是,很多人不知道小程序的变现方式。那么,哪些类型的小程序可以变现?哪些功能能够帮助小...
2022-05-30
佛山系统定制开发之公司采购系统开发的优势是什么 佛山系统定制开发之公司采购系统开发的优势是什么 佛山系统定制开发之公司采购系统开发的优势是什么1、线上采购管理严谨,将采购分为战略性采购和操作性采购,施工行业涉及的材料、物品等严格按照公司需要采购,完善资源配...
2022-06-20
小程序开发公司之移动互联网传播的六大特点 小程序开发公司之移动互联网传播的六大特点 小程序开发公司之移动互联网传播的六大特点随着传统媒体向新媒体的不断转变,如今移动互联网传播逐渐成为了很多品牌传播公司重点研究的领域,互联网传播进入了一个全新的时...
2022-06-06
佛山站群营销之做好网站关键词百度优化的六大关键 佛山站群营销之做好网站关键词百度优化的六大关键 佛山站群营销之做好网站关键词百度优化的六大关键一、网站的主题要包含核心关键词选择网站关键词的时候,要会用短语匹配,举个例子,如果你做的关键词是“广州网站建设”,...
2022-05-23
文档反馈
您的改进建议 x
  • 意见反馈
  • 问题类型
  • 标记的内容