需要将图像（水平/垂直）保持在固定高度的 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 行在不正确的同一元素上应用引导类 .col-md-12 和 .row。引导类 .col-xx-nn 必须分配给具有引导类 .row 的子元素。

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

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

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

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

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

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

干杯

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

Answer 2

你必须添加类

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

因为 .col-md-12.col-xs-12.btn>a>img 不适用于任何给定的 HTML div 内容

Answer 3

随着盒子变宽，图像变宽是设计要求吗？如果是这样，将图像保留在框内的唯一方法是在增加图像高度时增加框的高度。

如果不需要放大图像，那么您可以在此处查看我的解决方案：http://jsfiddle.net/6y4uf16y/75/

我所做的只是从您的图像中删除显式宽度（第一个是width="25%"，第二个是width="30%"），而是使用 CSS 通过限制图像的最大高度来控制比例。 .items img {max-height:100px;}.

由于您有一个固定的高度并且需要将图像保留在框内，因此您知道图像上也有一个固定的最大高度

Answer 4

我不确定你是否可以在 T1 和 T2 上换行，否则你可以这样做

img{
    max-height:170px;
    width:auto
}

DEMO

Answer 5

我同意@Bhavin Solanki 的观点，这可能是我建议尝试给予的一件事

	width: 100px;
	height: 50px;

百分比或者您可以使用特定图像选择器的媒体查询，这将帮助您管理很多事情

Answer 6

您的 HTML 引导代码并不完全正确：

1. 您不能将 .col-md-12 类嵌套在 .col-md-3 类中 not 至少据我所知。
2. 您的.rows 类并不总是在代码中很好地定位 请参阅我在下面准备的 fiddle 链接。

我试图尽我所能理解你想用你的代码实现什么我还在你的代码中订购了标签，以便你的 div 适合窗口大小而不管它的宽度。

编辑

尝试使用 vw 单位 (width:15vw;) 定义图像的宽度，这将防止图像穿过包含项目。

我在这里为你举例说明：

http://jsfiddle.net/merhzqwg/65/

希望对你有帮助。

Answer 7

好的，就是这样，你的代码不是很干净。还有一些错误

例如：您使用了两次id="imageresource"。 id 可以仅在单个页面上使用一次。 非常重要。

但我会为此提供快速解决方案。

默认情况下，引导程序将max-width: 100%; height: auto; 添加到类img-thumbnail 以覆盖我所做的是我已经为两个图像img-sale 添加了一个类。

<img class="img-thumbnail img-sale" id="imageresource" src="https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcQKWYNnGt8d9G1sf8PE0TpOglpZ2dKnHWAP5FB_spYgelcToong" width="30%" style="margin-left: 30px;" />

并添加了以下css：

.img-sale {
  max-height: 170px;
  width: auto;
}

http://codepen.io/anon/pen/OVwrpJ?editors=110

http://jsfiddle.net/6y4uf16y/82/

但其余代码不建议继续。