使用angular缩放大图像以适应屏幕宽度

scaling large image to fit screen width using angular

本文关键字：屏幕 angular 缩放 放大 图像 使用      更新时间：2023-09-26

我想使用AngularJS缩放大图像的高度/宽度，使其适合多个设备上的屏幕（响应）。这个网站就是我努力实现目标的一个例子。

angular有一个指令可以处理这个问题吗？或者我需要创建一个指令或工厂来完成这个任务吗？有人试过WURFL Image Tailor（WIT）吗？

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

例如，为了按宽度缩放：

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

按高度缩放：

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

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

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

这是只使用CSS实现的，不需要Angular甚至JavaScript。

WURFL Image Tailor做了一些不同的事情——它实际上根据屏幕宽度提供不同大小的图像（图像大小和文件大小）。当你不想让较小屏幕上的浏览器下载原始分辨率和大小的图像时，这很有用。（假设较小的屏幕意味着移动，移动意味着较慢的连接。）

相关文章：