CODEWITHSUNDEEP
htmlcssimageflexbox
Kyle Truong
Kyle Truong

Reputation: 2741

background cover still leaves images too big

I'm trying to display a bunch of logos for my portfolio. I've got 9 different logos of all different sizes, and they just don't fit into their div box. I though background-size: cover could fix it, but something is just off. Can someone point me to the right direction to get these images scaled down properly such that no logo is cut?

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');
    }

Upvotes: 0

Views: 396

Answers (1)

Jacob G
Jacob G

Reputation: 14172

Just use background-size:contain; instead of cover.
contain, according to the 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.

Upvotes: 1

Related Questions