[英]Responsive images when image rendering size in relation to screen width is unknown
[英]Responsive images when image width is not proportional to viewport width?
我正在使用Twitter Bootstrap的响应式网格 ,我想在页面中包含一些图像,如下所示:
<div class="row">
<div class="span3"><img src="img1.png" /></div>
<div class="span3"><img src="img2.png" /></div>
<div class="span3"><img src="img3.png" /></div>
<div class="span3"><img src="img4.png" /></div>
</div>
但是,很难使图像响应,因为Bootstrap图像宽度与视口宽度无直接关系,这排除了例如细丝方法。
在上面的示例中,在1080像素宽的屏幕上,图像堆叠使得每个div占据视口宽度的不到25%,并且每个图像仅需要~250px宽。 但是,在750像素宽的屏幕上,div垂直堆叠占据视口宽度的100%,因此每个图像需要~750px宽。
我以为我可以这样做:
<img src="spacer.gif" />
但后来我意识到这对非JavaScript用户不起作用。 我可以默认加载一个小图像,但是非JS用户在大屏幕上获得了不好的体验,而且一些用户还必须加载小图像和大图像。
有什么建议?
如果您的主要问题是没有在移动设备上加载不必要的大图像,并且您正在寻找非JS选项,那么您可能会发现像Sencha.io Src这样的东西很有用。 基本上,您通过Sencha路由所有图像:
<div class="row">
<div class="span3"><img src="http://src.sencho.io/http://yourimageserver.com/img1.png" /></div>
<div class="span3"><img src="http://src.sencho.io/http://yourimageserver.com/img2.png" /></div>
<div class="span3"><img src="http://src.sencho.io/http://yourimageserver.com/img3.png" /></div>
<div class="span3"><img src="http://src.sencho.io/http://yourimageserver.com/img4.png" /></div>
</div>
然后,Sencha服务器检查HTTP请求头中的用户代理,然后根据他们对浏览器的规范提供预定大小。
如果您尝试解决此客户端,可以使用PictureFill
基本上,它实现了与W3C中提议的元素类似的解决方案。 您可以在标记中插入以下内容(来自PictureFill网站上的示例):
<div data-picture data-alt="A giant stone face at The Bayon temple in Angkor Thom, Cambodia">
<div data-src="small.jpg"></div>
<div data-src="medium.jpg" data-media="(min-width: 400px)"></div>
<div data-src="large.jpg" data-media="(min-width: 800px)"></div>
<div data-src="extralarge.jpg" data-media="(min-width: 1000px)"></div>
<!-- Fallback content for non-JS browsers. Same img src as the initial, unqualified source element. -->
<noscript>
<img src="external/imgs/small.jpg" alt="A giant stone face at The Bayon temple in Angkor Thom, Cambodia">
</noscript>
</div>
<noscript>
避免了浏览器必须下载spacer.gif并且还作为没有JS可用的后备; 用户只需获取small.jpg,这将适用于禁用javascript的旧手机。
(min-width: ...)
媒体查询允许您根据设备大小选择断点,您还可以使用(min-device-pixel-ratio: 2.0)
用于Retina显示等高清设备。
为了您的目的,您可以设置如下:
<div data-src="image_250x250.jpg" data-media="(min-width: 1080px)"></div>
<div data-src="image_750x750.jpg" data-media="(min-width: 750px)"></div>
并在您的CSS中使用媒体查询以确保250x250图像堆栈。
希望有所帮助!
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.