html - 需要将图像(水平/垂直)保持在固定高度 div

Question

我正在关注我之前的问题，它有两个盒子，有两个图像(可以是垂直的或水平的)，问题是盒子的高度是固定的，当我改变窗口屏幕时某些屏幕尺寸的图像会绕过框的边界。

我检查了这些问题的答案1和 2但没有太大帮助。

DEMO

CSS

.items { */
    position: relative;
    margin-bottom: 7px;
    margin-left: 7px;
    margin-right: 0px;
    text-align: left;
    background-color: red;
    border-top-left-radius: 20px;
    border-top-right-radius: 20px;
    border-bottom-left-radius: 20px;
    padding-left: 1%;
    height:260px;

}



.col-md-12.col-xs-12.btn>a>img {
    float: right;
    width: 100px;
    height: 50px;
}

.col-md-12.col-xs-12.my-col {
    padding-left: 100%;
}

.my-row {
    bottom: 0;
    padding-right: 0;
    position: absolute;
}

.my-row {
    bottom: 0;
    padding-right: 0;
    position: absolute;
}

.btn {
    float: right;
    bottom:0;
    margin-right:-12px;
    margin-bottom:-6px;
    position:absolute;
    right:0;
}

HTML

<div class="container-fluid">
            <div class="row">
                    <div class="col-md-3 items">
                        <div class="row">
                            <div class="col-md-12 text-center">
                                <h4>T1</h4>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-md-12 text-center">
                                <h5>T2</h5>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-md-12 row text-center">
                                <a
                                    href="https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcQKWYNnGt8d9G1sf8PE0TpOglpZ2dKnHWAP5FB_spYgelcToong"
                                    title="T1" data-gallery rel="nofollow"> <img
                                    id="imageresource"
                                    src="https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcQKWYNnGt8d9G1sf8PE0TpOglpZ2dKnHWAP5FB_spYgelcToong"
                                    class="img-thumbnail" width="30%" style="margin-left: 30px;" />
                                </a>

                            </div>
                        </div>
                        <div>
                                    <a href="#" target="_blank"><img src="#" class="btn" /></a>
                                </div>
                    </div>



                    <div class="col-md-3 items">
                        <div class="row">
                            <div class="col-md-12 text-center">
                                <h4>T1</h4>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-md-12 text-center">
                                <h5>T2</h5>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-md-12 row text-center">
                                <a
                                    href="https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcQKWYNnGt8d9G1sf8PE0TpOglpZ2dKnHWAP5FB_spYgelcToong"
                                    title="T1" data-gallery rel="nofollow"> <img
                                    id="imageresource"
                                    src="https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcQKWYNnGt8d9G1sf8PE0TpOglpZ2dKnHWAP5FB_spYgelcToong"
                                    class="img-thumbnail" width="25%" style="margin-left: 30px;" />
                                </a>

                            </div>
                        </div>
                        <div>
                                    <a href="#" target="_blank"><img src="#" class="btn" /></a>
                                </div>
                    </div>


            </div>
        </div>

    </div>

Answer 1

首先，标记对于您想要的来说过于复杂，第 15 行和第 45 行正在应用 Bootstrap 类 .col-md-12 和 .row 在不正确的同一元素上。必须将 Bootstrap 类 .col-xx-nn 分配给具有 Bootstrap 类 .row 的子元素。

回到你想要的轨道上。我认为我已经简化了 HTML 代码以获得您想要的结果。检查一下，让我知道哪里不对，我会更改它并解释原因。

https://jsfiddle.net/6y4uf16y/84/

我所做的是围绕使用 CSS flexbox 的销售图像创建一个容器 div。这个 div 将占用所有剩余空间。因此，如果您更改 .items 元素的高度。 flexbox 容器将适应并且销售图像将适本地响应新尺寸。除了放置在 260px 的 .items 类上的高度外，这里没有固定高度，我相信这是您想要的。

这样做的原因是 Bootstrap 类 .img-reponsive 需要高度和/或宽度属性才能响应。因此，我将高度和宽度设置为等于它周围的 flex 盒容器。如果您愿意，可以将 width 值或 .img-sale 更改回 30%。

此外，作为奖励，我已将按钮对齐，使其始终位于右下角，正如我认为您想要的那样。

如果这个答案解决了您的问题，请不要忘记将其标记为正确的解决方案。

干杯

编辑 抱歉错误的 JSFiddle 链接，已添加正确的链接。我还添加了证据，证明它是动态的，在 h4 和 h5 元素中包含多行文本。