rails - 根据视口大小呈现不同的图片

Question

我使用rails和bootstrap，并且我在登录页面上使用了bootstrap轮播。我发现在移动视图中，旋转木马开始看起来非常糟糕，除非我使图片远远高于宽。

我想在我的erb文件中使用if语句来检查视口大小并呈现适当的图像。我不认为在这种情况下使用css中的媒体查询是合适的，因为图像大小决定了旋转木马的大小（而不仅仅是背景图像）。

很抱歉，如果这是一个新问题。

Answer 1

Erb是服务器端渲染的，它实际上没有视口大小的概念，你需要使用javascript与你的代码一起进行调整。

这似乎是css中媒体查询的完美案例。这比使用js混淆更清晰。

您可以在旋转木马中绘制两张图像。给所有宽图像一个不同的类（例如宽图像），并且所有高图像都是一个独特的类（例如，高图像）。然后，在css的相应部分中，只需将不需要的图像类设置为none，这将有效地使您只显示适当的图像（并控制轮播的大小）。