CSS : How to resize an image based on its own size, not on its container-CodePudding

I followed this problem : CSS image resize percentage of itself?

But in my case, nothing works.

I have 4 images I would like to fit inside a container. I've tried putting them in another div container and then adjusting their width in %, but it keeps adjusting to the width of the parent.

the solution I have is to keep playing with the width % of the img to get what I want. And I made them as flex items.

Is there a way to adjust the size of the images based on their own size?

What I want is, if I enter img { width : 50%;} I want it to be 50% if the image. Not the container. I've tried this way in my code, but not successful.

I can Imagine that having a fixed width container would make it work, but how about this width : max-container or fit-content?Doesn't seem to make what I thought.

.terms-of-service h2 {
  text-align: left;
}

.terms-of-service p {
  margin: 5px;
  padding-left: 5px;
}

.small-logos {
  display: flex;
  width: max-content;
  justify-content: space-evenly;
}

.small-logos img {
  width: 15%;
}

<div class="terms-of-service col-content">
  <h2>Terms of Service</h2>
  <p>This site uses cookies. By continuing to use this site you are agreeing to our use of cookies. Please refer to <a href="#">Google's Privacy Terms</a> and <a href="#">Terms of Service</a> to see how cookies are used.</p>
  <div class="small-logos"><img src="https://www.sabico.com/wp-content/uploads/2012/12/slocaliza2.jpg" alt="BBB"><img src="https://www.sabico.com/wp-content/uploads/2012/12/slocaliza2.jpg" alt="25y"><img src="https://www.sabico.com/wp-content/uploads/2012/12/slocaliza2.jpg" alt="green"><img src="https://www.sabico.com/wp-content/uploads/2012/12/slocaliza2.jpg"
      alt="Env"></div>
</div>

CodePudding user response：

Have you tried grid? Within a grid, setting a percentage width of an item will make it a percentage of the allocated width the grid has given that item.

.container {
  display: grid;
  grid-template-columns: repeat(4, 1fr); // 4 equal grid items

  .image {
    width: 100%; // image will 25% of container
  }

  .halfWidthImage {
    width: 50%; // image will be 12.5% of container. half the width of it's allocated grid space
  }
}

It's not exactly what you want but I believe it's the closest you'll get with pure CSS

CodePudding user response：

So what you want is .terms-of-service to be resizable and the 4 image resize with it. You want images to stay in proportion while resizing. But changing width stretches them.
If that is the case, then you can try object-fit: contain; property. Or set aspect ratio of each image using aspect-ratio: 250/100; property to keep them in proper shape.

Show code snippet

<!DOCTYPE html>
<html>

<head>
  <style>
    .terms-of-service h2 {
      text-align: left;
    }
    
    .terms-of-service p {
      margin: 5px;
      padding-left: 5px;
    }
    
    .small-logos {
      display: flex;
      justify-content: space-evenly;
    }
    
    .small-logos img {
      width: 10%;
      object-fit: contain;
       /*aspect-ratio: 2/1;*/
    }
  </style>
</head>

<body>
  <div class="terms-of-service col-content">
    <h2>Terms of Service</h2>
    <p>This site uses cookies. By continuing to use this site you are agreeing to our use of cookies. Please refer to <a href="#">Google's Privacy Terms</a> and
      <a href="#">Terms of Service</a> to see how cookies are used.</p>
    <div class="small-logos"><img src="https://www.sabico.com/wp-content/uploads/2012/09/SABICO-group.png" alt="BBB" /><img src="https://www.sabico.com/wp-content/uploads/2012/09/rsc.jpg" alt="25y" /><img src="https://upload.wikimedia.org/wikipedia/en/thumb/2/24/WWF_logo.svg/188px-WWF_logo.svg.png"
        alt="green" /><img src="https://upload.wikimedia.org/wikipedia/commons/thumb/9/9b/Bass_logo.svg/255px-Bass_logo.svg.png" alt="Env" /></div>
  </div>
</body>

</html>

Go in full page mode and resize browser window.

But if you are looking for adjusting dimensions based on image's actual size then here is what specification says:

In CSS, a replaced element is an element whose representation is outside the scope of CSS; they're external objects whose representation is independent of the CSS formatting model.

Put in simpler terms, they're elements whose contents are not affected by the current document's styles. The position of the replaced element can be affected using CSS, but not the contents of the replaced element itself. Some replaced elements, such as elements, may have stylesheets of their own, but they don't inherit the styles of the parent document.

The only other impact CSS can have on a replaced element is that there are properties which support controlling the positioning of the element's content within its box.

Typical replaced elements are:

<iframe>

<video>

<embed>

<img>

This makes sense, because if you change dimensions of your 'Terms of Service` box then you'll have to actually go and edit all 4 images in photo editing software to change their dimensions to keep them consistent with the theme.

For more information refer: https://developer.mozilla.org/en-US/docs/Web/CSS/Replaced_element