在Wordpress站点上为标题图像设置媒体查询

Question

我使用带有子主题的Genesis框架的WP网站http://selfreliantschool.com/。目前，图像完全没有响应 - 在屏幕缩小时不会缩放。我补充说：

div {
  position: relative;
  height: 400px;
  width: 400px;
  margin: 0 auto;
}
div img {
  position: fixed;
  left: 0;
}

到

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js">
</script>
<div>
  <img src="http://lorempixel.com/400/400/cats" />
  <img src="http://lorempixel.com/400/400/technics" />
  <img src="http://lorempixel.com/400/400/nature" />
  <img src="http://lorempixel.com/400/400/animals" />
</div>

部分并且能够使图像的宽度正确缩放，但我在其下方的白色空间（菜单上方）结束。媒体查询之外的那个位的css是：

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

无论宽度如何，它都保持115高度。有关达到高度的任何建议吗？

Answer 1

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

Answer 2

您的问题不是上面的CSS：

修复

.site-title a {
   background: url(http://selfreliantschool.com/wp- content/uploads/2015/02/Graceful-banner-SRS-three6.jpg);
   background-repeat: no-repeat !important;
   background-size: contain !important;
   background-position: center !important;
}

注意：我必须使用！important，因为窗口调整大小会有多个媒体查询。你可以清理css有点节省空间和混乱。