1

我有一个大小不断变化的图像（在每个不同的视图上从数据库中调用不同的图像）。

我想在响应式 Web 应用程序中显示图像。就像这样 - 在智能手机设备中，我希望它适合屏幕的大小 - 但要小一点（例如，下面 30% 的文本将可见，而图像将占据大约 70%屏幕）。

我已经构建了应用程序并且图像就在那里，我只是想确保不同的图像大小都能对各种浏览器做出良好的反应。移动而不是。

我如何缩放图像（显示的任何图像），以便无论调用什么图像，使用什么设备，图像都将适合小型设备、桌面或桌面或平板电脑视图图像将处于其正常大小（即，假设它不是很大且分辨率太高 - 在这种情况下，我希望它在其他视图中也按比例缩小）。

我该怎么办？

我需要使用 ImageMagick、picturefill、css、javascript（jquery？coffeescript？bootstrap）还是可以使用纯 html5？有什么先进的吗？帆布？

4

2 回答 2

2

您应该考虑使用CSS3 媒体查询。

您可以使用类似于下面的查询来定位智能手机，您可以根据正在查看您的网站的设备大小将相关图像定义为不同的大小，例如

@media screen 
and (min-device-width : 320px) 
and (max-device-width : 480px) {
  #myImg { 
    width:70%;
  }
}

然后，在您的常规网站的 CSS 文件中，您可以简单地将图像保留为全尺寸（正如我假设您已经完成的那样）。

通常最好将您的媒体查询 CSS 也放入外部样式表本身，因此您<head>可以包含以下内容：

<link rel="stylesheet" type="text/css" href="desktopStyle.css">
<link rel="stylesheet" media="screen and (min-device-width: 320px) and (max-device-width: 480px)" href="smartphoneStyle.css">
于 2013-04-17T14:30:44.300 回答
0

I have used picturefill, and it's pretty cool.

If you need more fine-grained control over your classnames, or need load events for your images, you can also try my jquery-pikshur plugin.

于 2013-04-20T21:01:02.883 回答