html - 为 Wordpress 网站上的标题图片设置媒体查询

Question

我有 WP 站点 http://selfreliantschool.com/使用带有子主题的 Genesis 框架。目前图像完全无响应 - 不会随着屏幕缩小而缩放。我添加了这个:

    .header-image .site-title a {
         background-size: contain !important;
    }

到

@media only screen and (max-width: 767px) {

部分并能够使图像的宽度正确缩放，但我在它下面(菜单上方)结束了空白。媒体查询之外的那个位的 css 是:

.header-image .site-title a {
   background-color: none;
   margin: 0 auto;
   max-width: 1070px;
   min-height: 115px;
   padding: 0;
}

因此无论宽度如何，它都会保持 115 的高度。还有关于让高度按比例缩放的建议吗？

Answer 1

使用 background-size:cover; 会产生与 contain 类似的效果(按比例缩放)，但始终覆盖作为背景的元素的可见区域而不是显示所有图像。