Need to keep image (horizontal / vertical) in a fixed height div

Question

I am following my previous question that has two boxes, that have two images (can be vertical or horizontal), the issue is the height of boxes are fixed and when I change the window screen in some screen sizes the images bypass the border of the boxes.

I checked answers of these questions 1 and 2 but did not help much.

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

First off, the markup is over complicated for what you want and line 15 and 45 are applying bootstrap classes .col-md-12 and .row on the same element which is in incorrect. Bootstrap class .col-xx-nn must be assigned to a child element with a bootstrap class .row.

Getting back on track to what you want. I have simplified the HTML code to get your desired result, I think. Check it out and let me know what isn't right and I will change it and explain why.

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

What I did was create a container div around the sale image that uses the CSS flex box. This div will take up any remaining space. Therefore, if you change the height of your .items element. The flexbox container will adapt and the sale image will respond appropriately to the new size. There is no fixed heights here except for the one that was placed on the .items class of 260px which I believe is what you wanted.

The reason for this is that the bootstrap class .img-reponsive needs a height and/or width attribute to be responsive. Therefore, I have set the height and width equal to the flex box container around it. You can change the width value or .img-sale back to 30% if you wish.

Moreover, as a bonus, I have aligned the button to always be in the bottom right corner as I think you wanted it.

If this answer solves your problem, don't forget to mark it as the correct solution.

Cheers

Edit Sorry wrong JSFiddle link, correct link has been added. I also added proof that it is dynamic with multiple rows of text in the h4 and h5 elements.