我正在尝试在我的网页中制作背景图片,将尺寸定义为 80%。这样可行。我想让我的背景图像“响应”,所以我希望它在使用较小的窗口时调整大小。它确实调整了大小,但当然它太小了,无法完美地看到它。有没有办法定义图像的最小宽度? 谢谢!
这是我的 CSS:
.pageBio{height: 700px; background-image: url(https://****.png); background-repeat: no-repeat; background-position: center; background-color: #2a67b2; background-size:80%; text-align: center; font-size: 24px; line-height: 30px; color: black;
谢谢!
最佳答案
正如您已经说过的,您正在使图像具有响应性。因此您可以使用下面提到的媒体查询来定义图像大小。
@media only screen and (max-width: 640px){.pageBio{background-size:cover;}}
或
@media only screen and (max-width: 640px){.pageBio{background-size:auto 100%; }}
关于html - 定义背景图像的最小宽度,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/29296928/