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

【问题标题】：Different images - resizing, scaling in a responsive web app - to fit varying screen sizes不同的图像 - 在响应式 Web 应用程序中调整大小、缩放 - 以适应不同的屏幕尺寸
【发布时间】：2013-04-10 05:55:45
【问题描述】：

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

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

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

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

我该怎么办？

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

【问题讨论】：

@Ejay @ user125697 好的，谢谢，您有示例实现的链接吗？
这应该能让你到达那里:) developer.mozilla.org/en-US/docs/CSS/Media_queries
您在使用媒体查询方面是否采纳了我的建议？
我还没解决..

标签： html image css resize responsive-design

【解决方案1】：

您应该考虑使用CSS3 Media Queries。

您可以使用类似于下面的查询来定位智能手机，您可以在其中将相关图像定义为不同的尺寸，具体取决于您的网站正在查看的设备尺寸，例如

@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">

【讨论】：

【解决方案2】：

我用过picturefill，很酷。

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

【讨论】：