自动调整图像填充div

问题描述：

我有一个图像里面的div，我需要尽可能大。我尝试过使用width: 100%和height: 100%，max-width和max-height也是如此，但这种方法没有奏效。这些不起作用的原因是因为我的图像是不同的大小，有些高大一些。有没有办法让图像调整大小，以便在没有高度扩展div的情况下尽可能地扩大图像大小？自动调整图像填充div

基本上：width:100%除非这使得height大于100％，在这种情况下，我想使用height:100%。

如果您需要图片大小受父母身高和*宽度的限制，您可以考虑使用背景图片并将其设置为[background-size]（https://developer.mozilla.org/en- US/docs/Web/CSS/background-size）来“包含”。 – showdev

答

一个更优雅的解决方案是设置div的大小，然后将其后台url(foo) cover。如果需要的话，这会切掉边缘。使用contain而不是cover也是如此，但不会切断边缘。

编辑：根据意见，我建议使用object-fit: contain。没有必要对我的建议使用背景图像低估。

img元素不是背景。 –

然后你可以使用'object-fit：cover'或'contains'。无论如何，由于后勤原因，图像经常被制作成背景。 – jhpratt

仅仅因为“出于逻辑原因而经常制作背景的图像”，您不能仅仅假设图像是背景。 –

答

当设置了width或height（不是两个）时，没有明确设置的那个会自动调整以保持图像的比例正确。所有这一切都需要有一个负责任的图像（一个可以扩展到它的父元素的大小），您只需设置要么（不是两个）的下列内容：

width:100%; 

height:100%;

，当然，父元素必须也有一个width或height，它也有响应。如果父母永远不能调整大小，那么孩子将永远不会调整大小。

为了确保height永远不会超过一定量较大，当max-height会在图像上的图像容器上使用，或只是height和overflow那。

下面是一个例子：

#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%; 
 
}

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

这似乎是最好的答案，但我遇到的问题是，现在我的图像被扭曲，因为当它变成“最大高度”时，它仍然变宽，只是不会更高。任何修补程序？ –

@JakeP是的，如果你看看我的例子，还有另一种方法来限制没有'max-height'的'height'，那就是在容器上设置一个绝对的'height'以及'overflow：hidden'。 –

当我执行它时，会导致图像在底部被切断。我仍然需要看到整个图像。 –

答

您可能想要为图像使用object-fit: cover; css规则。

这几乎等同于背景大小：如果您使用背景进行封面。

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

UPDATE：如果你不想从图像裁剪任何东西，你可以只使用height:inherit;和位置，你不知何故形象，以适应各种风格的（或许中心）

这将保持比将扩大宽度尽可能多。

这会起作用，但是我将其用于商店的产品图像，因此切掉部分图像不是一种选择。 “包含”可以作为替代方案。 –

@JakeP我会建议将其设置为背景图片，根据我的回答。 – jhpratt

检查我更新的答案。 –

答

据我所知，你需要图像来填补无论大小不同的权利？

给<div>容器中的任何宽度和高度你想要的。
给予<img>元素宽度：100％。

高度将自动调整。

如果希望图像彼此使用显示后包裹：上<div>容器挠曲属性。

开始=>

这已经被回答，虽然你的答案不起作用。这将使图像尽可能宽，但它不会考虑高图像。如果'height'>'width'那么高度应该是100％，而不是'width：100％'。 –

自动调整图像填充div

相关推荐