css 具有最小值和最大值的响应背景

zd287kbt  于 2023-07-01  发布在  其他
关注(0)|答案(2)|浏览(99)

当我在小屏幕上使用background-size: contain;时,我想用图像做一个响应式背景,这很棒,但在大屏幕上,我的图像太大了。如何使用HTML和CSS确定最大宽度和高度。

8yparm6h

8yparm6h1#

您可以根据屏幕大小使用媒体查询切换background-size。例如,如果您的图像宽度为640px:

body {
  min-height: 100vh;
  background-image: url(http://placekitten.com/640/480);
  background-position: center;
  background-size: contain;
  background-repeat: no-repeat;
}

@media(min-width: 640px) {
  body {
    background-size: auto;
  }
}
ibrsph3r

ibrsph3r2#

你可以在你的css中使用媒体查询。

@media (background-size: contain){
    // rules for when the background-size: contain is applied
}

相关问题