javascript - angularjs:将背景大小从覆盖更改为包含

Question

我正在练习 Angular ，我有一些页面有一个名为“MainImg”的主图像。在 CSS 中，它的格式如下:

.main-section__main-image{
            background: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url({{ settings["MainImg"] }}) top no-repeat;
            background-size: cover;
            }

所以在我的 Controller 中使用 MainImg 将显示具有相应设置的图像。

但是，有些图片太大或太宽，我想以不同的方式设置它们的格式。我怎样才能将背景大小更改为仅包含某些图片？该应用程序是数据驱动的，因此设置将应用于所有名为 MainImg 的图片。

Answer 1

需要更多关于您的 Controller 和可能的模型的上下文，但您可以尝试以下方法。

为 className 添加一个字段到 MainImg。这将包含“main-section__main-image”或包含“main-section__main-image main-image__cover”，具体取决于您是否需要为相关图像设置 background-size .

在您的 View 中使用 ng-class 指令从该字段中读取所需的类。

将 CSS 中的 background-size 规则移动到新的 .main-image__cover 类，它应该可以工作。