CSS：如何根据图像自身大小而非容器来调整图像大小

Question

CSS：如何根据图像自身大小而非容器来调整图像大小

htmlcssimage

3

我遇到了这个问题：CSS图像按比例调整大小？

但在我的情况下，没有任何作用。

我有4张图片，我想将它们适应容器。我尝试将它们放入另一个div容器中，然后根据百分比调整它们的宽度，但它们仍然会调整为父容器的宽度。

我现在的解决方案是不断调整图片的百分比宽度以达到预期效果，并将它们设置为伸缩项。

是否有一种方法可以根据图片本身的大小调整图像的大小呢？

我想要的是，如果我输入img { width : 50%;}，我希望它是图像的50％，而不是容器的50％。我已经在我的代码中尝试过这种方式，但没有成功。

我可以想象，使用固定宽度的容器可以使它正常工作，但是类似于width : max-container or fit-content的方法似乎不会达到我所想要的效果。

.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>

- m3.b

这个旧问题有一些有趣的想法。也许这会有所帮助。 - tromgy

哈哈，那就是我所指的... - m3.b

哦，这是一个有趣的问题。 - George

2个回答

0

所以你想要的是让.terms-of-service可调大小，并且4张图也跟着一起变化大小。你希望图片在调整大小时保持比例，但改变宽度会使它们拉伸。
如果是这样的话，你可以尝试使用 object-fit: contain; 属性。或者使用 aspect-ratio: 250/100; 属性设置每张图片的纵横比来保持它们的正确形状。

<!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>

进入全屏模式并调整浏览器窗口大小。

但是，如果您想根据图像的实际大小调整尺寸，则规范如下：

CSS中，替换元素是指其表示超出CSS范围的元素；它们是独立于CSS格式模型的外部对象。

简单来说，它们是内容不受当前文档样式影响的元素。替换元素的位置可以使用CSS进行控制，但不能直接控制替换元素本身的内容。某些替换元素（例如<img>）可能具有自己的样式表，但不会继承父文档的样式。

CSS对替换元素唯一的其他影响是存在支持控制元素内容在其框内定位的属性。

典型的替换元素包括：

<iframe>

<video>

<embed>

<img>

这是有道理的，因为如果您更改“服务条款”框的尺寸，则必须实际上去编辑所有4个图像以更改它们的尺寸，以使它们与主题保持一致。

有关更多信息，请参见：https://developer.mozilla.org/en-US/docs/Web/CSS/Replaced_element

- the Hutt

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- George · Accepted Answer

您尝试过网格布局吗？在网格布局中，设置项目的百分比宽度将使其成为分配给该项目的宽度的百分比。

.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
  }
}

虽然不完全符合您的要求，但我相信这是使用纯CSS最接近您要求的方法。