css - 如何使用 css 将图像大小调整到其容器？

Question

我的网站上有一个位于特定网格区域的徽标。我希望它能够响应大小并最大化各自的网格区域。

我用下面的css试过了，但它不起作用：

.logo {
    grid-area: im;
    text-align: center;
}

.logo-img {
    max-width: 50%;
    height: auto;
    position: relative;
}

这是 GitHub 文件的链接：https ://github.com/toniFET/WXApp.git

网站的打印屏幕

标签： css

Answer 1

使用背景图片：

.grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: auto;
}

.grid > div {
  border: solid 1px #333;
  min-height:200px;
}

.grid > div.img{
  background-image:url(https://placekitten.com/200/200);
  background-size:cover;
  background-position:center center;
}

<div class='grid'>
  <div class='img'></div>
  <div></div>
  <div></div>
  <div></div>
</div>