使用角度縮放大圖像以適合屏幕寬度

Question

我想使用AngularJS縮放大圖像的高度/寬度，以使其適合多個設備的屏幕（響應）。 這個網站是我要完成的一個例子。

angular是否有可以處理此問題的指令，或者我需要創建指令或工廠來完成此任務？ 有人嘗試過WURFL Image Tailor（WIT）嗎？

Answer 1

在大多數情況下，您根本不需要angularjs。 可以單獨使用css使用background-size屬性完成此操作。

例如，為了縮放到寬度：

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

並縮放到高度：

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

Answer 2

您鏈接到的網站使用background-image技巧：而不是調整圖像的大小，而是使用圖像作為div的背景，然后將適當的樣式應用於div：

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

這僅使用CSS即可實現-無需Angular甚至JavaScript。

WURFL Image Tailor的功能有所不同-它實際上根據屏幕寬度提供不同大小的圖像（圖像大小和文件大小）。 當您不希望較小屏幕上的瀏覽器下載原始分辨率和大小的圖像時，此功能很有用。 （假設較小的屏幕表示移動設備，而移動設備則表示連接速度較慢。）