基于宽度百分比的图像缩放

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

准备工作

准备一张高分辨率的图像。

该图像应该能够缩放以适配最大尺寸的可视区域。打开图像编辑软件。

实现方式

通过图像编辑工具打开想要编辑的图像并且将其宽度设置为300px。保存编辑后的新图像,然后移动或者上传到你的Web应用所对应的资源文件夹中。

为了展示响应式特效,需要在HTML中嵌人图像和一些文字说明。

<p class="text">Loremipsum dolor sit amet...</p>
<div class="img-wrap">
    <img alt="robots image" class="responsive" src="robots.jpg?watermark/1/image/aHR0cDovL3d3dy56enl6YW4uY29tL3dwLWNvbnRlbnQvdXBsb2Fkcy8yMDE2LzA3Lzk2ZDZmMmU3ZTFmNzA1YWI1ZTU5Yzg0YTZkYzAwOWIyLnBuZw==/dissolve/100/gravity/SouthEast/dx/10/dy/10" >
    <p>Loremipsum dolor sit amet</p>
</div>

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

p.text {
    float:left; width:60%;
}
div.img-wrap{
    float:right; width:40%;
}

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

img.responsive {
    max-width:100%; height:auto;
}

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

工作原理

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

打赏
吐槽 (1)
×
加载中,请稍候…

您需要 登录 后才能发表评论。

avatar

- 评论

  • 加载中,请稍候…
我要吐槽