问题是我创建了两个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。
欢迎对此列表进行任何添加或更正。