Question

我在div中有一个图像，我需要尽可能大。我尝试使用width: 100%和height: 100%，同样适用于max-width和max-height，但这种做法并没有奏效。这些不起作用的原因是因为我的图像尺寸各异，有些高而且有些宽。有没有办法让图像调整大小，以便在没有高度扩展div的情况下尽可能宽？

基本上：width:100%除非height大于100％，否则我想使用height:100%。

Answer 1

您可能希望对图片使用object-fit: cover; css规则。

这几乎相当于background-size：如果你正在使用背景，那就是封面。

请注意，规则将“裁剪”图像的某些部分，具体取决于比率。

更新：如果您不想从图像中裁剪任何内容，可以使用height:inherit;并以某种方式定位图像以适合所有样式（可能是中心）

这样可以保持比例并将宽度扩大到可能的范围。

Answer 2

如果设置width或height（不是两者），则未明确设置的那个将自动调整以使图像保持正确的比例。拥有响应式图像（一个可扩展到其父元素的大小）所需的只是设置（不是两者）以下内容：

width:100%;

height:100%;

当然，父元素也必须具有响应性的width或height。如果父母永远不能调整大小，那么孩子就不会重新调整大小。

要确保height永远不会超过一定金额，那么max-height会在图片上使用，或只是height和overflow在图像容器上。

以下是一个例子：

＆＃13;

#container {
  display:flex;
}

div:not(#container){
  width:25%;
  height:100px;
  border:1px solid black;
  overflow:hidden; /* ensure height is consistent */
}


/* Comment the following out temporarially to see the native image sizes */
img { 
  width:100%;
}

＆＃13;

<div id="container">
 <div><img src="https://static1.squarespace.com/static/54e8ba93e4b07c3f655b452e/t/56c2a04520c64707756f4267/1493764650017/"></div>
 <div><img src="http://static.boredpanda.com/blog/wp-content/uploads/2016/08/cute-kittens-30-57b30ad41bc90__605.jpg"></div>
 <div><img src="https://lh3.googleusercontent.com/fa44expvfZrMe6nIG7n_7mblJJbI1FGaAJledcdzZjaLPzntm2rUWr2_4xxRXGadre41CdqyGHE=s640-h400-e365"></div>
 <div><img src="https://fthmb.tqn.com/INZEtkWYEpsZaksoewT_mA4DREo=/960x0/filters:no_upscale()/about/Two-kittens-GettyImages-559292093-58822e4f3df78c2ccd8b318c.jpg"></div>
 <div><img src="https://i.ytimg.com/vi/w6DW4i-mfbA/hqdefault.jpg"></div> 
</div>

＆＃13;

Answer 3

更优雅的解决方案之一是设置div的大小，然后将其背景设置为url(foo) cover。如果需要，这会切掉边缘。使用contain代替cover会做同样的事情，但不会削减边缘。

编辑：根据评论，我建议使用object-fit: contain。不需要对我使用背景图像的建议进行投票。

Answer 4

据我所知，无论大小不同，你都需要用图片来填充div？

为<div>容器提供您想要的宽度和高度。
提供<img>元素宽度：100％。

身高将自动调整。

如果您希望图片彼此包装，请在<div>容器上使用 display：flex 属性。

自动调整图像大小以填充div

4 个答案: