我有一个1000px X 600px的图像.我想使用它作为一个div的响应背景,但是想设置最小宽度为1000px,尽管浏览器窗口有多小.
这是令人沮丧的,因为似乎没有一个简单的方法来定义最小值.宽度.
如果我使用background-size：cover – 由于某些原因,图像的默认值远远大于1000px.
请帮忙
解决方法
如果媒体查询是一个选项,您可以为小于1000px宽的浏览器视口设置媒体查询.
假设您的HTML视口设置为：
<Meta name="viewport" content="width=device-width">
你的div被命名为’bg’：
<div class="bg"></div>
在你的CSS：
.bg {
width: auto; /* Scale the div to the parent width */
height: 900px; /* The div needs some height to be visible */
background-image: url(bg.png); /* This is your background image */
background-size: 100%; /* Always size the image to the width of the div */
background-position: top; /* Position the image to the top center of the div */
}
/* For any viewports less than 1000px wide */
@media (max-width: 1000px) {
.bg {
background-size: 1000px 600px; /* Force the image to its minimum width */
}
}
