bootstrap grid system filling image - html

I am trying to create a column that is separated into 2 nested columns. They both should be images that cover the entire height and width of their respected columns. However, for some reason the images go over the div that contains them.
<div class="col-lg-9 col-md-9 col-sm-9 col-xs-9">
<div class="col-lg-5 col-md-5 col-sm-5 col-xs-5">
<img class="fitimages" src="./images/pic1.jpg">
</div>
<div class="col-lg-7 col-md-7 col-sm-7 col-xs-7">
<img class="fitimages" src="./images/pic2.jpg">
</div>
.fitimages{
max-width: 100%;
max-height: 100%;
}
I used max-width and max-height so that they would surround the parent div but for some reason the left image doesn't fill the entire width and height while the right one goes over it.

give your img this style : object-fit: cover;

Related

How to make Bootstrap columns take the height of main?

I want to center vertically the divs inside the container but the columns take the height of the document and not of main (whom height equals the one of its content) Hereby my code:
<main class="col-lg-12">
<div class="col-lg-1 col-md-0"></div>
<div class="col-lg-4 col-md-6 col-xs-12">
<img src={{image}}>
</div>
<div class="col-lg-1 col-md-0" ></div>
<div class="col-lg-4 col-md-6 col-xs-12">
<div class="title">{{title}}</div>
<div class="text">{{text1}}</div>
</div>
<div class="col-lg-1 col-md-0"></div>
</main>
main div{
height: 100%;
}
I can see in Developer Tools that the div takes 100% of the doc not of main... How could I fix this in order to vertically align the image?
Thank you!
first bootstrap .col should be in .row container
you might need one in your main col to nest columns inside
then, don’t write css to set height:100% on columns, you dont need that.
If I’m right .col have display: flex, so you can use align-items-stretch class to make you column taking the height of their wrapper, being the missing .row
I suppose you will need a height:100% on the row. to do that add it a class h-100

How to fit an image inside a Bootstrap 3 div?

I am using a div tag in code as shown below:
<div class="col-sm-6 col-md-6 col-lg-4">
<img src="images/dummy_image.png" class="img-responsive">
</div>
The user can upload any kind of image and have it displayed here. I want to fit the image inside of the div, meaning specifically that I need to cover the full div using that image as it's resized.
I am using Bootstrap 3.3.7. Please advise.
Just add you images width to 100%.
But as you are saying user will upload various kind of images, so can use object-fit property.
Add the CSS like this:
.fit-image{
width: 100%;
object-fit: cover;
height: 300px; /* only if you want fixed height */
}
<div class="col-sm-6 col-md-6 col-lg-4">
<img src="images/dummy_image.png" class="img-responsive fit-image">
</div>
You will find the details about object-fit and object-position here : https://css-tricks.com/on-object-fit-and-object-position/
For Bootstrap 4
<div class="col-sm-6 col-md-6 col-lg-4">
<img src="images/dummy_image.png" class="img-fluid">
</div>
bootstrap.css
.img-fluid {
max-width: 100%;
height: auto
}
It is safe to assume that by fitting you mean covering all of the width. This is because
You typically do not know the height just by using col-sm-6 or col-md-6 or col-lg-4.
There is a huge probability of loss in aspect ratio of the image if you try to resize it according to your own will.
Use <img src = "images/dummy_image.png" class = "img-responsive" width = "100%" /> for fitting the column. This will fit your image width-wise into the column and will automatically modify the height (keeping the aspect ratio in mind), so you do not have to worry about image getting illogically resized.

Resposive div with image inside and text

I have 3 column in a wrapper div and each div has two div's one with image and one with text.
I want to make it responsive so that image % text share 50% of area and at certain point text is visible & image is hidden or vice versa.
http://codepen.io/anon/pen/meWYeQ?editors=110
<div class="container">
<div class="row inner-wrapper">
<div class="row footer-quick-links">
<!--
<div class="col-xs-12 col-sm-6 col-md-4 bk-blue no-padding">
One
</div>
<div class="col-xs-12 col-sm-6 col-md-4 bk-dark-blue no-padding">
Two
</div>
<div class="col-xs-12 col-sm-6 col-md-4 bk-magenta no-padding">
Three
</div>
-->
<div class="footer-ql-box bk-dark-blue"><div class="f-img-box"><img src="https://placeholdit.imgix.net/~text?txtsize=33&txt=350%C3%97150&w=163&h=100"></div><div class="f-label-box"><span>OUR MISSION</span></div></div>
<div class="footer-ql-box bk-blue"><div class="f-img-box"><img src="https://placeholdit.imgix.net/~text?txtsize=33&txt=350%C3%97150&w=163&h=100"></div><div class="f-label-box"><span>VISION</span></div></div>
<div class="footer-ql-box bk-magenta"><div class="f-img-box"><img src="https://placeholdit.imgix.net/~text?txtsize=33&txt=350%C3%97150&w=163&h=100"></div><div class="f-label-box"><span>CONTACT</span></div></div>
</div>
</div>
</div>
Add a 100% to the width to the image inside image box and drop the absolute positioning of the image box itself (so the image properly scales it's half).
.footer-ql-box img{width:100%; height: 100px;}
.f-img-box{float:left;width:49%;}
Note forcing the height to 100px allows it so the height of the image does not scale down when the window shrinks.
Example

Adjust width of inline buttons automatically based on parent width

I currently have 3 buttons that are inline. I'm having issues in how to style these buttons so the width is automatically calculated to take the width of the parent div. For example, if the parent div is 1000px, I'd like the width of the inline buttons to be 1000/3 - a set margin to space these buttons. So those need to be taken into account which will be fixed. Catch is, the first and last element should not have a left margin and right margin respectively. This way I can dynamically add buttons and the styling should take care of the width. Hope that helps?
JsFiddle
HTML:
<div class="row" style="width: 1000px;border: 1px solid #999;">
<div class="row" style="padding-bottom:20px;">
My Button
My Button2
My Button3
</div>
</div>
You could use a table as so:
<table style="width:100%;">
<tbody style="width:inherit;">
<tr>
<td>Left</td>
<td>Centre</td>
<td>Right</td>
</tr>
</tbody>
</table>
And then add as many <td> elements as needed.
Assuming you are ignoring bootstrap standards, and wanting to custom style this.
try
.row {
/*width: 1000px;*/
border: 1px solid #999;
}
.row .row {
padding-bottom: 20px;
margin 0 -10px; /*offset the left and right gutter*/
}
.btn-default {
display: block;
float: left;
text-align: center;
margin: 10px; /*example margin*/
padding: 30px;/*example padding */
/*width: 30%;*/ /*fall back if needed*/
width: Calc((100% / 3) - 20px); /*minus 2 x margin*/
}
JSFiddle
KingKongFrog. Hi again. When you set a width to a fixed value like 1000px you lose the ability to be responsive. Try to use percentage. When using Bootstrap the xs starts around 700px, if you have say 3 buttons side by side you can run into problems fitting them across a small screen like 320px.
So you need to take over control from bootstrap css a little to do want you want to do.
I have added some of the bootstrap classes and also added some more custom classes to help show what you may need to do here.
Using #media (max-width: 320px) is the main width that you may need to control like reducing the size of the buttons/fonts etc. And if using any col-xs-offset-X when it shown on a screen size within 320px you will need to reset these to zero left etc.
Custom css that you want/need to over ride Bootstrap needs to be placed below bootstrap in the page.
Have a look at the Fiddle here and try resizing it.
Here is a full screen fiddle view that's easy for resizing.
<br>
<div class="container bg-info">
<br>
<div class="col-lg-12 bg-warning">
<br>
<div class="col-lg-3 col-md-3 col-sm-3 col-xs-3
col-lg-offset-2 col-md-offset-2 col-sm-offset-1 col-xs-offset-2
col-xxs-pull-1">
My Button1
</div>
<div class="col-lg-3 col-md-3 col-sm-3 col-xs-3
col-lg-offset-0 col-md-offset-0 col-sm-offset-1 col-xs-offset-0
.col-xxs-offset-1">
My Button2
</div>
<div class="col-lg-3 col-md-3 col-sm-3 col-xs-3
col-lg-offset-0 col-md-offset-0 col-sm-offset-1 col-xs-offset-0
col-xxs-push-1">
My Button3
</div>
<br><br>
</div>
<br>
</div>
If you are working with bootstrap, you have to understand the grid system. There is col-xs-..., col-sm-..., col-md-..., col-lg-... to handle the column width. Therefore don't set a width. Read bootstrap grid options to understand the basics. A whole width of the screen has in total 12 columns. For example col-xs-12 in smaller displays fills the whole width.
HTML
<div class="row">
<div class="col-..."></div>
<div class="col-..."></div>
<div class="col-..."></div>
</div>
<div class="row myButtons">
<div class="col-xs-4 col-sm-4 col-md-4 col-lg-4">
My Button
</div>
<div class="col-xs-4 col-sm-4 col-md-4 col-lg-4">
My Button2
</div>
<div class="col-xs-4 col-sm-4 col-md-4 col-lg-4">
My Button3
</div>
</div>
Here in all device sizes every part has 4 columns. In total 12. (Set, for example every cols-xs-4 to col-xs-12 and resize the screen to see what happens!). That's how bootstrap work.
Example

100% sizing image inside div issue, unwanted space on left and right

building a webpage, and i ran in to some trouble, so here´s whats going on,
Im building the page using the bootstrap´s grid, but only the grid.
ive made a staff page where i want 4 pictures side by side, with a small margin between each image, the pictures should squares with an aspect of 1:1
Heres my: html;
<div class="col-lg-3 col-md-4 col-sm-6 col-xs-6 ">
<img src="img/product.jpg">
</div>
<div class="col-lg-3 col-md-4 col-sm-6 col-xs-6 ">
<img src="img/product.jpg">
</div>
<div class="col-lg-3 col-md-4 col-sm-6 col-xs-6 ">
<img src="img/product.jpg">
</div>
<div class="col-lg-3 col-md-4 col-sm-6 col-xs-6 ">
<img src="img/product.jpg">
The image inside the div is cropped in 1:1
and has the following css:
max-width: 100%; max-height: 100%;
position:relative;
display:block;
Heres the problem, for some reason the image dosn't fill out the div, the image is centered with about one em space on each side which result in an unwanted margin between the images.
Also how do i place magin between the divs, without one of the divs jumps down, when each div is 20% of the width.
I dont have enough reputation to post images yet :/
Try the following: In your css create a class called .nopadding (or anything you want) assign the following values to it padding-left:0; padding-right:0; then add it to <div class="col-lg-3 col-md-4 col-sm-6 col-xs-6 nopadding">
play around with it til you get the desired result.