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

重新回到你想要的轨道 。 我认为，我简化了HTML代码以获得您想要的结果。 检查一下，让我知道什么是不对的，我会改变它并解释原因。

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

我所做的是在使用CSS弹性框的销售图像周围创建一个容器div 。 这个div将占用任何剩余的空间。 因此，如果更改.items元素的高度。 Flexbox容器将适应，销售图像将适应新尺寸。 这里没有固定的高度，除了那些被放置在一个.items类260px我相信这是你想要的。

原因是bootstrap类.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 Bootstrap代码并不完全正确：

1. 你不能在.col-md-3类中嵌入.col-md-12类，至少不是我所知道的。
2. 你的.rows类并不总是在代码中很好地看到我在下面准备的小提琴链接。

我尽力了解你想要用你的代码实现什么，我还在你的代码中订购了标签，这样你的div就适合窗口大小而不管它的宽度。

编辑

尝试使用vw单位（ width:15vw; ）定义图像的宽度，这将使图像不会越过包含的项目。

我在这里为你举了一个例子：

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

希望能帮助到你。

Answer 7

好的，这是事情，你的代码不是很干净。 也有一些错误

例如：你使用了两次id="imageresource" 。 一个id 只能在一个页面上使用一次。 非常重要 。

但我会提供一个快速解决方案。

默认情况下bootstrap添加max-width: 100%; height: auto; 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/

但不建议继续使用其余代码。