Question

我的bootstrap列定义如下：

<div class="col-md-4 limit">
    <img id="myImage" src="" class="img-responsive"/>
</div>

<style>
    .limit {
        max-height:500px;
        overflow:hidden;  
    }
</style>

图像的来源以编程方式获得，因此我事先并不知道图像的高度或宽度。我想要做的是这个高度有限的列中的图像完全出现在div内部。使用img-responsive类我已经实现了水平填充列的图像，但是，由于此类还将高度设置为auto，因此大多数时候这会导致图像溢出并被隐藏。我不希望我的图像以任何方式溢出。

所以，我们可以说我的专栏测量：

宽度：300px（由bootstrap定义）
身高：500px（.limit）

我的图片尺寸为：

宽度：600px
身高：1500px

当前配置使图像缩小到300px x 750px。由于其容器设置为仅500px，这导致最后250px在溢出内丢失。我想将图像重新调整为200px x 500px，以使其完全进入包含div

我该怎么做？谢谢！

Answer 1

@Luis Becerril我通常使用这个插件来解决这类问题。请试试这个。如果可能符合您的要求。 jQuery Image Center

Answer 2

试试这个：

<div class="row">
    <div class="col-md-4">
        <div class="limit">
            <img src="images/yourimage.png" alt="" />
        </div>
    </div>
</div>

<style type="text/css">
    .limit{
        width: 300px;
        height: 500px;
        max-height: 500px;
        overflow: hidden;
     }
    .limit img{
       width: 100%;
       height: 100%;
     }
 </style>

Answer 3

您可以尝试继承父div的高度或宽度（因为两者都不包含比例）。只有当你拥有相同类型的img（所有portret或landscape）时，这才有效。其他解决方案是根据程序语言中img的最大宽度/高度计算尺寸。选择与条件匹配的那个（var＆lt; = max value）。然后在你的HTML中回显解决方案。

Answer 4

Bootstrap 4中最简单的方法

<div class="row">
    <div class="col-md-4">
        <img src="images/yourimage.png" alt="" class="w-100" />
    </div>
</div>

在引导程序中响应图像以填充列

4 个答案: