Question

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

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

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

如何缩放图像（显示的任何图像），以便调用任何图像以及使用的任何设备，图像将适合小型设备中屏幕大约70％的屏幕尺寸，并且在桌面或平板电脑视图中，图像将处于正常大小（也就是说，假设它不是很大且分辨率太高 - 在这种情况下，我希望它在其他视图中按比例缩小）。

我应该怎么做？

我是否需要使用ImageMagick，picturefill，css，javascript（jquery？coffeescript？bootstrap）或者我可以使用普通的html5吗？什么进步？帆布？

Answer 1

您应该考虑使用CSS3 Media Queries。

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

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

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

将Media Query 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">

Answer 2

我使用了picturefill，这很酷。

如果您需要对您的类名进行更细粒度的控制，或者需要为图片加载事件，您还可以尝试我的jquery-pikshur插件。

不同的图像 - 在响应式Web应用程序中调整大小，缩放 - 以适应不同的屏幕大小

2 个答案: