问题是我创建了两个 50/50 网格如下
Block A | Block B
Block A | Block B
我想做的是插入可点击的图像，这很容易完成。但是，我的问题是图像的尺寸。每当我在模拟器中测试应用程序时，我的问题就会出现，图像要么拉伸(stretch)到整个 block ，这很好，但不幸的是，图像变得模糊而且不是很清晰。另一种方法，我调整图像大小并将其插入每个 block 中，当我测试它时，模糊效果消失但图像太小。我用的是 (64*64)。现在，在你告诉我将图像调整为其他尺寸之前，我可以这样做，但这是一个好的解决方案吗？我的意思是该应用程序是混合的，这意味着它可以部署在不同的平台上。
为了拉伸(stretch)图像，我使用了以下 CSS
width: 100%;
height: auto;
- 解决这个问题最实际的方法是什么？调整大小 每个目标设备或使用 css 拉伸(stretch)所有设备的图像？
- 图像的扩展有什么不同吗？
- 无论目标平台或 目标设备？
最佳答案
方法
有很多选项可供您使用，以下是其中一些:
1) 您可以提供图片的最大尺寸，并使用 CSS 使图片可以平滑缩小。
优点: 实现简单，易于管理。 缺点:根据设备/平台，您可能会交付过大的资源并可能影响性能。
2) 对 Picturefill 这样的图像使用 polyfill这让你可以使用 <picture>元素以及使用新的 <img> sizes 的属性和 srcset .不一定非得是 Picturefill，而是一种客户端工具，可帮助您确定要为用户提供的图像大小。
优点: 根据不同的标准提供要使用的图像列表。当你需要art direction为您的图像。让浏览器和其他因素决定应该提供哪个图像。 缺点: 需要更多时间来配置和微调。一些遗留支持问题
3) 您可以尝试从服务器端进行特征检测，然后提供适当的图像尺寸。
优点: 可以微调每个设备/平台。 缺点: 由于针对每个设备/平台进行了微调，因此不够灵活。服务器端的特征检测不是很可靠。更多资源、要管理的模板等。
4) 客户端和服务器端解决方案的混合，参见 RESS .
还有其他一些，其中许多介于上述之间。
图像文件类型
JPG 由于颜色和颜色渐变的高度变化，照片逼真的图像如人像。没有透明度。
PNG 照片般逼真的图像，例如人像，但文件大小可能比 JPG 等效图像大。具有透明度。
GIF 一小组颜色可用。适用于一小组颜色和一个简单的 Logo 或一组形状。具有透明度。
这是一些图像类型 examples .
Any additions or corrections to this list are welcome.
关于jquery - 照片网格中可点击图像的设置，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/31170628/