Question

我正在关注我之前的问题，其中有两个框，有两个图像（可以是垂直或水平），问题是框的高度是固定的，当我更改窗口屏幕时一些屏幕尺寸图像绕过框的边框。

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

enter image description here

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 。必须将Bootstrap类.col-xx-nn分配给具有引导类.row的子元素。

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

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

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

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

此外，作为奖励，我已将对齐按钮始终位于右下角，因为我认为您需要它。

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

干杯

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

Answer 2

你必须添加课程

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

因为 .col-md-12.col-xs-12.btn＆gt; a＆gt; img 不适用于您提供的任何HTML div内容

Answer 3

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

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

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

由于你有一个固定的高度，需要将图像保存在方框内，你知道在图像上也有一个固定的最大高度

Answer 4

我不确定你是否可以在T1＆amp; T2，否则你可以这样做

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

DEMO

Answer 5

我同意@Bhavin Solanki并且可能是我建议尝试给予

的一件事

	width: 100px;
	height: 50px;

in to percentages或者你可以使用媒体查询来查看特定的图像选择器，这些图像选择器可以帮助你管理很多

Answer 6

您的HTML Bootstrap代码并非完全正确：

您不能在.col-md-12课程中嵌套.col-md-3课程据我所知，至少。
您的.rows类并不总是在代码中定位良好请参阅我在下面准备的小提琴链接。

我尽力了解您希望使用代码实现的目标，我还在代码中订购了代码，这样无论宽度如何，您的div都符合窗口大小。

修改

尝试使用vw单位（width:15vw;）定义图像的宽度，这样可以防止图像穿过包含的项目。

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

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

希望它有所帮助。

Answer 7

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

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

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

默认情况下，bootstrap将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/

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

需要将图像（水平/垂直）保持在固定的高度div中

DEMO

7 个答案: