手机前端布局之图片液态化_Css3.0_css2.0_html5

夜鹰教程网-程序员的加油站

·设为首页·加入收藏

本站首页技术文章全套前端云课堂智慧校园

你好，欢迎来到夜鹰网！【去购买教程】

当前位置：文章中心 >> Css3.0_css2.0_html5

手机前端布局之图片液态化

夜鹰教程网来源：www.yyjcw.com 日期：2017-8-13 23:06:13

图片在响应式布局中需要做到适应不同宽度的媒介给出最佳显示方案，如水一样会随着宽度的改变而改变。

图片在响应式布局中需要做到适应不同宽度的媒介给出最佳显示方案，如水一样会随着宽度的改变而改变。

在HTML内的图片，比如文章里插入的图片我们可以通过CSS样式 max-width 来进行控制图片的最大宽度，如：

#content img {
     max-width:100%;
     height:auto;
}

如此设置后ID为content内的图片会根据content的宽度改变以达到等宽扩充。 height 为 auto 的设置是为了保证图片原始的高宽比例，以至于图片不会失真。

在WEB显示出来的图片除了 <img> 标签的图片外，还有 CSS 设置的背景图片。比如 logo 为背景图片：

<h1 id="logo"><a href="/">wondercss</a></h1>

#logo a {
     display:block;
     width:100%;
     height:40px;
     text-indent:-555em;
     background-image:url(logo.png);
     background-repeat:no-repeat;
     background-size:100% 100%;
}

background-size 是CSS3的新属性，用于设置背景图片的大小，有2个可选值，第1个值用于指定背景图的width，第2个值用于指定背景图的height，如果只指定1个值得，则第2个值默认为auto。

    background-size:cover; 等比扩展图片来填满元素
    background-size:contain; 等比缩小图片来适应元素的尺寸

来源：http://www.wondercss.com/2013/html-css/368/

复制链接网友评论收藏本文关闭此页

上一条：如何解决IE6及更早浏览器浮动时产… 下一条：移动前端图片自适应两种常见情况解决方…

夜鹰教程网成立于2008年，目前已经运营了将近 13 年，发布了大量关于 html5/css3/C#/asp.net/java/python/nodejs/mongodb/sql server/android/javascript/mysql/mvc/easyui/vue/echarts原创教程。我们一直都在坚持的是：认证负责、一丝不苟、以工匠的精神来打磨每一套教程，让读者感受到作者的用心。我们默默投入的时间，确保每一套教程都是一件作品，而不是呆板的文字和视频！目前我们推出在线辅导班试运营，模式为一对一辅导，教学工具为QQ。我们的辅导学科包括 java 、android原生开发、webapp开发、商城开发、C#和asp.net开发，winform和物联网开发、web前端开发，但不仅限于此。普通班针对的是国内学员，例如想打好基础的大学生、想转行的有志青年、想深入学习的程序员、想开发软件的初学者或者业余爱好者等。就业办针对即将毕业上岗的大四学生，或者打算转行的初级开发工程师。留学生班针对的是在欧美、加拿大、澳洲、日本、韩国、新加坡等地留学的中国学子，目的是让大家熟练地掌握编程技能，按时完成老师布置的作业，并能顺利地通过考试。详细咨询QQ：1416759661 夜鹰教程网