html中size最小值,css – 如何使用background-size设置最小宽度

如果媒体查询是一个选项,您可以为小于1000px宽的浏览器视口设置媒体查询.

假设您的HTML视口设置为：

你的div被命名为’bg’：

在你的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 */

}

}