仅通过图像的特定部分使图像响应？答案

【问题标题】：Make an image responsive by only a certain part of it?仅通过图像的特定部分使图像响应？
【发布时间】：2014-12-03 12:16:29
【问题描述】：

如果我通过它的高度设置图像的响应，图像在每个屏幕分辨率下都保持这样：http://s9.postimg.org/4hdz3899r/how_it_is.jpg

购买假设我想让图像仅在图像的红色区域通过其高度响应，如下所示：http://s9.postimg.org/eq6g91xbj/how_i_want.jpg

我怎样才能做到这一点？

【问题讨论】：

【解决方案1】：

您可以使用两张图片。您不能缩小图像的各个部分，即 JPG、PNG、GIF。

这可以通过需要一些 JavaScript 的 <canvas> 元素来实现。在该元素方面比我更有经验的人必须确认这一点。

【讨论】：

【解决方案2】：

您需要将其拆分为 2 张图片。然后你可以设置你不想缩放的部分（黑色部分）的尺寸。然后您可以将红色宽度设置为固定像素值，但将高度设置为百分比。

【讨论】：

由于技术原因，我无法将两张图片分开。
你能按照你想要的比例制作多张图片吗？仅显示 1 个图像文件，但使用媒体查询换出不同屏幕尺寸的新图像。这将是保持一个图像文件显示的唯一方法。据我所知，仅使用 css 或 javascript 更改单个文件的比例是不可能的。

【解决方案3】：

您要么需要使用两个单独的图像，要么只使用示例中显示的纯色背景颜色？你可以简单地使用百分比。

【讨论】：