问题是我创建了两个50/50网格,如下所示
Block A | Block B
Block A | Block B
我尝试做的是插入可点击的图像,这是一件容易的事。但是,我的问题在于图像的尺寸。每当我在模拟器中测试应用程序时,我的问题就出现了,图像要么在整个块上伸展,这很好但不幸的是图像模糊不清楚。另一种方法,我调整了图像的大小并将其插入每个块中,当我测试它时,模糊的效果消失但图像太小。我用过(64 * 64)。现在,在你告诉我将图像调整到其他尺寸之前,我可以做到这一点,但这是一个很好的解决方案吗?我的意思是应用程序是混合的,这意味着它可以部署在不同的平台上。
用于拉伸图像我使用以下css
width: 100%;
height: auto;
答案 0 :(得分:0)
<强>途径强>
您可以使用很多选项,以下是一些选项:
1)您可以按照它们将使用的最大尺寸提供图像,并使用CSS来使它们顺利缩小。
优点: 简单实施,易于管理。 缺点: 根据设备/平台的不同,您可能会提供过大且可能影响性能的资源。
2)对Picturefill等图片使用polyfill,可以使用<picture>
元素并使用<img>
的新sizes
属性}和srcset
。不一定是 Picturefill ,而是一个客户端工具,可以帮助您确定要向用户提供的图像大小。
优点: 根据不同的标准提供要使用的图片列表。当您需要art direction图片时。让浏览器和其他因素决定应该提供哪个图像。 缺点: 需要更多时间来配置和微调。一些遗留支持问题
3)您可以尝试从服务器端进行功能检测,然后提供适当的图像大小。
优点: 可以对每个设备/平台进行微调。 缺点: 由于每个设备/平台都经过微调,因此不够灵活。来自服务器端的功能检测不是很可靠。更多资源,管理模板等。
4)客户端和服务器端解决方案的混合,请参阅RESS。
还有其他人,其中很多都介于上述内容之间。
图片文件类型
JPG 由于颜色和颜色渐变的高度变化,照片逼真的图像,如人的肖像。没有透明度。
PNG 照片逼真的图片,如人物肖像,但文件大小可能比 JPG 等效。有透明度。
GIF 可用的一小组颜色。适合一小组颜色和简单的徽标或一组形状。有透明度。
以下是一些图像类型examples。
欢迎对此列表进行任何添加或更正。