《响应式Web设计:HTML5和CSS3实践指南》——1.2节基于宽度百分比的图像缩放

简介:

本节书摘来自华章社区《响应式Web设计:HTML5和CSS3实践指南》一书中的第1章,第1.2节基于宽度百分比的图像缩放,作者(美) Benjamin LaGrone,更多章节内容可以访问云栖社区“华章社区”公众号查看

1.2 基于宽度百分比的图像缩放
本方法依赖于客户端编码来完成对于大图像的缩放功能。客户端只需单张图像来依据浏览器的窗口大小呈现图像。如果对于客户端的网络带宽有足够的信心,确信该操作不会使得页面加载变慢,那么本方法是比较可行的。

1.2.1 准备工作
毫无疑问我们需要一张图像。使用Google的图像搜索来获取一张高分辨率的图像。例如,搜索 robots,将会得到158 000 000条记录,还不错的结果。但是想要的是一张大尺寸的图像,因此单击Search tools选项,然后将Any Size选项改为Large。可以看到依然有4 960 000张图片可供选择。
该图像应该能够缩放以适配最大尺寸的可视区域。打开图像编辑软件。如果并未安装此类软件,也会有众多的免费图像编辑软件供你选择。Gimp便是其中之一,它是一款功能强大的开源图片编辑软件,因此下载是完全免费的。访问http://www.gimp.org即可获取。

1.2.2 实现方式
通过图像编辑工具打开想要编辑的图像并且将其宽度设置为300px。保存编辑后的新图像,然后移动或者上传到你的Web应用所对应的资源文件夹中。
为了展示响应式特效,需要在HTML中嵌入图像和一些文字说明。如果没有足够的时间来阐述你的人生经历,没有关系,回到互联网并通过Ipsum生成器来得到一些文本样本。访问http://www.lipsum.com即可获取Ipsum文本段落。

在CSS文件中需要为文本段落、图像及图像包装器(wrapper)分别设置相应的类属性。文本段落设置为向左浮动,同时宽度为60%,图像包装器(wrapper)的宽度则为40%。

现在的布局方式为流式布局(fluid layout),但是响应式的图像效果依然不见踪影。目前的图像仍然是静态的,宽度依旧为300px。但是当添加了下面的CSS配置后,一切都会改变。为图像添加一个新的类,设置max-width属性值为100%。这会使得图像的宽度适应浏览器宽度的改变。接下来,将height属性设置为可动态变化的值。

到目前为止,经过优化并可以适应浏览器窗口大小改变的图片就已经呈现在读者眼前了。

下载示例代码
登录http://www.packtpub.com可以下载通过你的账户所购买的所有Packt书籍的示例源码。如果是通过其他途径购买的本书,访问http://www.packtpub.com/support,完成注册即可通过电子邮件获取源码。

1.2.3 工作原理
设置在CSS中图像元素的responsive属性会强制该元素100%占据其父元素的空间。当父元素的宽度改变时,图像元素也会相应改变并填充对应的宽度。而属性height: auto的作用在于保证图像自身的高宽比例不会发生变化。

相关文章
|
2天前
|
存储 JavaScript 前端开发
HTML web存储
HTML web存储
8 0
|
8天前
|
移动开发 HTML5
HTML5/CSS3粒子效果进度条代码
HTML5/CSS3进度条应用。这款进度条插件在播放进度过程中出现粒子效果,就像一些小颗粒从进度条上散落下来
22 0
HTML5/CSS3粒子效果进度条代码
|
8天前
|
移动开发 前端开发 JavaScript
:掌握移动端开发:HTML5 与 CSS3 的高效实践
:掌握移动端开发:HTML5 与 CSS3 的高效实践 “【5月更文挑战第6天】”
28 1
|
8天前
|
JavaScript 前端开发 UED
【Web 前端】如何将一个 HTML 元素添加到 DOM 树中的?
【5月更文挑战第2天】【Web 前端】如何将一个 HTML 元素添加到 DOM 树中的?
|
8天前
|
存储 前端开发 JavaScript
【Web 前端】如何找到所有 HTML select 标签的选中项?
【5月更文挑战第2天】【Web 前端】如何找到所有 HTML select 标签的选中项?
|
8天前
|
关系型数据库 MySQL
web简易开发(二){html5+php实现文件上传及通过关键字搜索已上传图片)}
web简易开发(二){html5+php实现文件上传及通过关键字搜索已上传图片)}
|
8天前
|
缓存 移动开发 前端开发
【专栏:HTML与CSS前端技术趋势篇】HTML与CSS在PWA(Progressive Web Apps)中的应用
【4月更文挑战第30天】PWA(Progressive Web Apps)结合现代Web技术,提供接近原生应用的体验。HTML在PWA中构建页面结构和内容,响应式设计、语义化标签、Manifest文件和离线页面的创建都离不开HTML。CSS则用于定制主题样式、实现动画效果、响应式布局和管理字体图标。两者协同工作,保证PWA在不同设备和网络环境下的快速、可靠和一致性体验。随着前端技术进步,HTML与CSS在PWA中的应用将更广泛。
|
8天前
|
前端开发 JavaScript UED
【专栏:HTML 与 CSS 前端技术趋势篇】Web 性能优化:CSS 与 HTML 的未来趋势
【4月更文挑战第30天】本文探讨了CSS和HTML在Web性能优化中的关键作用,包括样式表压缩、选择器优化、DOM操作减少等策略。随着未来趋势发展,CSS模块系统、自定义属性和响应式设计将得到强化,HTML新特性也将支持复杂组件构建。同时,应对浏览器兼容性、代码复杂度和性能功能平衡的挑战是优化过程中的重要任务。通过案例分析和持续创新,我们可以提升Web应用性能,创造更好的用户体验。
|
8天前
|
前端开发 JavaScript 搜索推荐
【专栏:HTML 与 CSS 前端技术趋势篇】HTML 与 CSS 在 Web 组件化中的应用
【4月更文挑战第30天】本文探讨了HTML和CSS在Web组件化中的应用及其在前端趋势中的重要性。组件化提高了代码复用、维护性和扩展性。HTML提供组件结构,语义化标签增进可读性,支持用户交互;CSS实现样式封装、布局控制和主题定制。案例展示了导航栏、卡片和模态框组件的创建。响应式设计、动态样式、CSS预处理器和Web组件标准等趋势影响HTML/CSS在组件化中的应用。面对兼容性、代码复杂度和性能优化挑战,需采取相应策略。未来,持续发掘HTML和CSS潜力,推动组件化开发创新,提升Web应用体验。
|
8天前
|
移动开发 前端开发 JavaScript
【专栏:HTML与CSS实战项目篇】使用HTML5与CSS3制作一个动态表单验证页面
【4月更文挑战第30天】本文介绍了使用HTML5和CSS3创建动态表单验证页面的方法。首先,简述HTML5用于构建网页内容,CSS3用于描述样式。接着,分四步展示实现过程:1) 设计包含输入框和提示信息的表单结构;2) 使用CSS3创建样式,增强视觉效果;3) 使用JavaScript监听输入事件,动态验证表单并显示错误信息;4) 测试和调试确保跨平台兼容性。通过学习,开发者能掌握创建带验证功能的表单,提升用户体验。