在bootstrap中响应图像以填充列-Java 学习之路

我有一个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

我怎样才能做到这一点？谢谢！

3 回答

试试这个：

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

回复于 2024-05-17T17:10:57+08:00

0

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

回复于 2024-05-17T17:10:57+08:00
1

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

回复于 2024-05-17T17:10:57+08:00

在bootstrap中响应图像以填充列

3 回答

相关问题