如何在我的网站的不同页面中自动调整图像大小？ [关闭]

Question

有没有一种方法可以让图片在不同的页面中以不同的尺寸出现？

我正在使用 CSS、HTML 和 Javascript 构建电子商务。该网站将有一些目录，其中包含许多待售产品的图像。在这些图像中的每一个中，我都放了一颗心，这样客户就可以点击它并将相应的产品保存在最喜欢的产品列表中，这个列表将在另一个页面中。

与目录一样，列表中的产品将包含每个项目的所有信息，包括图片，但更小。

我是否可以在整个网站上使用相同的图像，以便当它们显示在列表页面上时，它们会自动显示为小于原始尺寸？

或者这样做的唯一方法是针对每种情况调整每个图像的大小？

Answer 1

您可以使用 CSS background-size 属性将其设置为 contain 或 cover，具体取决于哪个最适合每个容器。还有更多关于如何使用它here。