html - 背景封面仍然使图像太大

Question

我正在尝试为我的投资组合显示一堆 Logo 。我有 9 个不同大小的不同 Logo ，它们只是不适合它们的 div 框。我虽然 background-size: cover 可以修复它，但有些东西刚刚关闭。有人能给我指出正确的方向，让这些图像适当缩小，这样就不会剪掉 Logo 吗？

html:

<div class="page-wrapper__content">
  <h2 class="page-wrapper__heading">Projects and Skills</h2>
  <p class="page-wrapper__description">hey</p>
  <div class="imagebox">
    <div class="logorow">
      <div class="logo html"></div>
      <div class="logo css"></div>
      <div class="logo javascript"></div>
    </div>
    <div class="logorow">
      <div class="logo jquery"></div>
      <div class="logo bootstrap"></div>
      <div class="logo sass"></div>
    </div>
    <div class="logorow">
      <div class="logo python"></div>
      <div class="logo django"></div>
      <div class="logo github"></div>
    </div>
  </div>
</div>

CSS:

  .page-wrapper__content {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    flex-wrap: wrap;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    padding: 0 30%;
    color: #fff; //white
    transform: skewX(18deg);
    transition: transform 1s, opacity 1s;
    background-size: cover;
}


  .imagebox {
    border: 3px solid red;
    width: 100%;
    height: 33%;
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    justify-content: space-around;
    .logorow {
      display: flex;
      flex-wrap: nowrap;
      border: 1px solid yellow;
      height: 33%;
      width: 100%;
    }
      .logo {
        background-size: cover;
        border: 1px solid purple;
        height: 100%;
        width: 100%;
      }
    .html {
      background-image: url('../images/html5.png');
    }

Answer 1

只需使用 background-size:contain; 而不是 cover。
包含，根据MDN docs :

A keyword that scales the image as large as possible and maintains image aspect ratio (image doesn't get squished). Image is letterboxed within the container. When the image and container have different dimensions, the empty areas (either top/bottom of left/right) are filled with the background-color. The image is automatically centered unless over-ridden by another property such as background-position.