Need to keep the image (horizontal / vertical) in a fixed div height
I am following my previous question which has two boxes that have two images (can be vertical or horizontal) . The problem is that the heights of the cells are fixed and when I change the window screen to some screen sizes the images bypass the border of the fields.
I checked the answers to these questions 1 and 2 but didn't 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>
source to share
Initially markup harder for what you need, and lines 15 and 45 used the bootstrap class .col-md-12
and .row
to the same element, which is in the wrong state. The bootstrap class .col-xx-nn
must be assigned to the child with the bootstrap class .row
.
Returning to the next wish . I think I have simplified the HTML to get the desired result. Check it out and let me know what is wrong 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 using a flex box. This div will take up all the remaining space. So if you change the height of your element .items
. The flexbox container will adapt and the sale image will respond appropriately to the new size. There are no fixed heights here other than the ones that were placed in the class .items
260px
, which I believe is what you wanted.
The reason for this is that the bootstrap.img-reponsive class needs a height and / or width attribute to be responsive. So I set the height and width to be equal to the flexbox container around it. You can change the value to width
or .img-sale
to 30%
if you like.
Also, as a bonus, I aligned the button to always be in the bottom right corner as I think you wanted to.
If this answer solves your problem, be sure to mark it as the correct solution.
Greetings
Edit Sorry wrong JSFiddle link, correct link added. I also added that it is dynamic with multiple lines of text in the h4 and h5 elements.
source to share
Is it a design requirement that the images expand as the boxes expand? If so, the only way to keep the images inside the boxes is to increase the height of the boxes as the height of the images increases.
If it is not a requirement to enlarge images, you can see my solution here: http://jsfiddle.net/6y4uf16y/75/
All I did was remove the explicit widths from your images (the first was width="25%"
and the second was width="30%"
) and instead used CSS to control the scale, limiting the maximum height of the images. .items img {max-height:100px;}
...
Since you have a fixed height and need to keep the images inside the boxes, you know you also have a fixed maximum height in the images
source to share
Your Bootstrap HTML is not entirely correct:
- You cannot inject a class
.col-md-12
inside a class.col-md-3
, not at least I know. - Your classes are
.rows
not always well positioned within the code, see the script link I prepared below.
I've tried my best to understand what you want to achieve with your code. I also ordered tags in your code to make your divs fit the window regardless of its width.
EDIT
Try to determine the width of your image using the vw ( width:15vw;
) element . This will cross the image with the content.
I gave an example for you here:
http://jsfiddle.net/merhzqwg/65/
Hope it helps.
source to share
OK, that's what your code is not very clean. there are some mistakes
eg: you have used twice id="imageresource"
. id
can ONLY be used once per page. Very important .
but I'll give you a quick fix.
by default bootstrap adds max-width: 100%; height: auto;
to class img-thumbnail
to override what I did - I added class to both images 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;" />
and added the following css:
.img-sale {
max-height: 170px;
width: auto;
}
http://codepen.io/anon/pen/OVwrpJ?editors=110
http://jsfiddle.net/6y4uf16y/82/
but the rest of the code is deprecated.
source to share