我正在尝试从JS获取幻灯片图像并在SCSS中调整它们的大小

Question

The slideshow images in JS are blown up past the references of the screen. I am attempting to resize the said images in SCSS to fit all types of screens. Please bear with me as I am still learning as I go.

JavaScript

SCSS

我不确定从 SCSS 中的 JS 引用上面的代码的正确方法是什么，所以这是我尝试过的：

.images>0>“https://images.unsplash.com/photo-1639254241780-09c10527eb37?crop=entropy&cs=srgb&fm=jpg&ixid=M3wzMjM4NDZ8MHwxfHJhbmRvbXx8fHx8fHx8fDE3MDU4MjYxODR8&ixlib= rb-4.0.3&q=85";

.images>1>“https://images.unsplash.com/photo-1491438590914-bc09fcaaf77a?crop=entropy&cs=srgb&fm=jpg&ixid=M3wzMjM4NDZ8MHwxfHJhbmRvbXx8fHx8fHx8fDE3MDU4MjYzMTN8&ixlib=rb -4.0.3&q=85";

.images>2>“https://images.unsplash.com/photo-1697490251825-0d6f7f3f7254?crop=entropy&cs=srgb&fm=jpg&ixid=M3wzMjM4NDZ8MHwxfHJhbmRvbXx8fHx8fHx8fDE3MDU4MjYzOTl8&ixlib =rb-4.0.3&q=85"; { 背景大小：封面； }

Answer 1

解决此问题的更好方法是将图像 URL 传递到 HTML 中的

<img>

标记，而不是将整个文档正文的背景设置为这些图像。这样您就可以向该

<img>

标记添加一个类，并且可以更改 SCSS 中图像的高度和宽度。

在所有屏幕尺寸下调整图像大小的一个技巧是使用“em”或“%”而不是像素，因为它们会随着视口缩放图像。