英文:
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
}
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论