使用角度缩放大图像以适合屏幕宽度

Question

我想使用AngularJS缩放大图像的高度/宽度，以便它适合多个设备上的屏幕（响应）。这个website就是我想要完成的一个例子。

angular是否有一个可以处理这个的指令，还是我需要创建一个指令或工厂来完成这个任务？有没人试过WURFL Image Tailor (WIT)？

Answer 1

在大多数情况下，你根本不需要angularjs。这可以使用background-size属性单独使用css来完成。

例如，为了缩放到宽度：

.bg {
  background-size: 100% auto;
}

并缩放到高度：

.bg {
  background-size: auto 100%;
}

Answer 2

您链接到的网站使用背景图片技巧：它不是调整图像大小，而是使用图像作为div的背景，然后将适当的样式应用于div：

height: 840px;
background-image: url('pathToImage');
background-size: cover;
background-position: center center;

这只能使用CSS实现 - 不需要Angular甚至JavaScript。

WURFL Image Tailor做了不同的事情 - 它实际上根据屏幕宽度提供不同尺寸的图像（图像大小和文件大小）。当您不希望较小屏幕上的浏览器以原始分辨率和大小下载图像时，这非常有用。 （假设较小的屏幕意味着移动和移动意味着连接速度较慢。）