Question

我想在CSS中做这样的事情：

.addImage{
    background-image:url('imageURL');
    // This is where I have a query:
    background-size: get_current_length get_current_width;
}

Answer 1

您可以使用viewport units获取页面的当前宽度/高度。使用100vw表示视口宽度的100％，100vh表示100％的视口高度。

Answer 2

我建议使用技巧：

img
{
  max-width: 100%;
}

Answer 3

我不确定你要问的是什么，你必须更清楚，但在我看来，你希望图像随浏览器分辨率而变化。如果是这样，您可以使用百分比来指定宽度和高度。

.addImage {
    width: 100%;     
    height: 100%;
}

Answer 4

你可以说：

.addImage
{
    background-image: url(URL);
    background-size: 100%;
}

Answer 5

如果是背景图片，

.addImage {
    background-size: 100%;
}

如果是图像，

.addImage {
    width: 100%;     
    height: 100%;
}

Answer 6

我解决了这个问题（在stackoverflow的帮助下），这是我的代码：

.addBackgroundImage{

background-image:url('image_url');
background-repeat: no-repeat;
background-position: center center;
background-attachment: fixed; 
-webkit-background-size: 100vw 100vh;
-moz-background-size:  100vw 100vh;
-o-background-size: 100vw 100vh;
background-size: 100vw 100vh;
}

如何根据屏幕的当前分辨率调整图像大小？

6 个答案: