具有最小和最大响应式背景

huangapple go评论65阅读模式
英文:

responsive background with min and max

问题

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

英文:

I want make a responsive background with image when I used background-size: contain; in small screen that was awesome but in large screen my image is too large. how I can Determine maximum width and height just using HTML and CSS.

答案1

得分: 0

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

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;
  }
}
英文:

You can use a media query to switch background-size depending on screen size. For example, if your image is 640px wide:

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-css -->

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;
  }
}

<!-- end snippet -->

答案2

得分: -1

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

@media (background-size: contain){
// 当应用background-size: contain时的规则
}

英文:

You can use media queries in your css.

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

huangapple
  • 本文由 发表于 2023年6月25日 20:02:35
  • 转载请务必保留本文链接:https://go.coder-hub.com/76550293-2.html
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定