将图像高度设置为容器高度并保持宽高比

有没有一种方法（仅使用CSS）将图像的高度设置为其容器的高度，同时保持高宽比，允许宽度溢出并隐藏？这听起来像很多要求，但肯定有一种方法。我的意思是，我希望显示图像的整个高度，但是如果宽度比容器允许的宽度更宽（使用bootstraps网格系统），则只需溢出：隐藏。我将高度设置为100％，看起来不错，但图片从侧面挤压以适应容器内部，而不是溢出和裁剪。通过将宽度设置为100％，它将填充容器。我相信它使用容器作为100％的标准，而不是照片的长宽比。所以这就是我需要做的。将图像高度设置为容器高度并保持宽高比

这是我怎么回事：

<div style="width:150px; height:150px; display:flex; flex-direction:column"> 
 
    <img src="http://i.imgur.com/RiX7XfW.jpg" alt="Banana" style="height:100%;width:auto;overflow:hidden"> 
 
</div>

TL; DR我需要保持图像纵横比，锁高度与容器的高度，让多余的图片只是溢出并被隐藏起来，使我可以看到尽可能多的图片，同时仍然充满容器。

奖励积分如果有办法以某种方式计算哪个维度较小并将其锁定到相关容器维度。

来源

2016-06-28 burnst14

只需设置图像作为容器的'背景image'然后用'背景大小：盖;'和'background-position：center center;' – APAD1

美丽！让这个答案，我将它标记为答案。 – burnst14

@ APAD1使这个答案，我会标记它是正确的。 – burnst14

-1

而不是嵌入这样做，如果图像与img标签，您可以将图像设置为容器的背景图像。然后通过使用background-size:cover;和background-position:center center;的组合，您可以使图像与容器的高度相匹配，同时保持原始图像的高宽比。 background-position属性将使图像居中，以便将左侧和右侧裁剪掉。

使用速记，该代码应该是这样的：

<div style="background:url('http://i.imgur.com/RiX7XfW.jpg') center center/cover no-repeat; width:150px; height:150px; display:flex; flex-direction:column"></div>

来源

2016-06-30 19:39:22 APAD1

没那么容易使用的图像标签，但如果使用CSS background-image属性（或快捷键background），然后

#wrap{width:300px;height:200px;margin:50px;overflow:hidden;} 
 
    #imgDiv{width:1000px;height:1000px;background-image:url(http://placekitten.com/900/900); background-size:cover;}

<div id="wrap"> 
 
    <div id="imgDiv"> 
 
    </div> 
 
</div>

来源

2016-06-28 22:15:13 gibberish

运行这段代码，我只能看到图片的一小部分。我需要尽可能多地看到照片，将其中一个尺寸锁定到其容器中。也许你的解决方案具有特定于浏览器的不兼容性？ – burnst14

将图像高度设置为容器高度并保持宽高比

回答

相关问题