I'm trying to keep a main banner on my page the same height as the browser window shrinks. I would like the left / right sides to end up being cut off and the banner to always focus on the center of the image.
http://jsfiddle.net/ab4p4aaj/
<div class="container-fluid">
<div class="row no-gutter">
<div class="col-md-12" id="home">
<img src="http://www.lightswitchcreative.ca/_images/mainslide.jpg" alt="" class="img-responsive" id="mainslide" />
</div>
</div>
Replace your image by a div:
<div class="container-fluid">
<div class="row no-gutter">
<div class="col-md-12" id="home">
<div id="mainslider"></div>
</div>
</div>
</div>
And add the image as background using background-size: cover
#mainslider {
height: 200px;
width: 100%;
background: url(http://www.lightswitchcreative.ca/_images/mainslide.jpg) center no-repeat;
background-size: cover;
}
Here is a JSFIDDLE
Related
I've researched and tried dozens of variations and am trying to figure out how to code it in Bootstrap 4, so that the entire image (native 1440 x 380) is visible in the jumbotron with the aspect ratio always maintained. At widths greater than 1440, the image needs to expand, i.e., 1600 x 422. Here's what I have so far, but I can't get the jumbotron to recognize the height of the image. Any suggestions?
HTML
<div class="container-fluid p-0">
<div class="jumbotron">
<div class="container">
<div class="overlay"></div>
<div class="row">
<div class="col-lg-2 col-md-3 col-sm-4">
Content
</div>
<div class="col-lg-6 col-md-6 col-sm-8">
More content
</div>
</div>
</div>
</div>
</div>
CSS
.jumbotron {
border-radius: 0;
margin-bottom: 0;
min-height: 365px;
background: url(hero_image.jpg) no-repeat;
background-size: cover;
}
i already found some questions regarding this topic but none of them could really help me solving my problem.
I like to build a simple Bootstrap grid looking like this:
<div class="container-fluid">
<div class="row">
<div class="col-sm-8"> Some Text </div>
<div class="col-sm-4">
<img src="..." alt="Full Size Background Image" />
</div>
</div>
<div class="row">
<div class="col-sm-4">
<img src="..." alt="Full Size Background Image" />
</div>
<div class="col-sm-8"> Some Text </div>
</div>
</div>
The col-sm-4-DIVs should contain a full size background image with the same height as the text and no padding.
Here's a photo of what I mean. I want the background image to cover the red area:
See Example
Any ideas how to do that?
Thank you very much for your help!!!
First option, you can set min-width:100% in your img tag:
img {
min-width: 100%;
}
Or Second option, you can set the image as a background and set it in the div that you want:
<div class="col-sm-4 full-img">
And the css:
.full-img {
background-image: url("....");
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
use css to set the background image on the column
<div class="row">
<div class="col-sm-4" style="background-image:url('.....')">
content......
</div>
I might be going about this the wrong way. I have two columns, and the right one is an image. I set a padding on .back, and I want the image I created to both
be responsive. IE, resize proportionally so that parts of it are never cut off. I believe this is achieved right now already.
use all the space given to it. I don't understand why this image's right edge ends before the right side of the page. I've set width to 100%, using container-fluid, and the columns add up to 12. Thoughts?
As a second question, i've added text-center to the div around the image so why is the image not centered when the window size is very small?
.fluid-img {
width: 100%;
height: auto;
}
.back {
padding-top: 150px;
overflow: hidden;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<div class = 'back'>
<div class = 'container-fluid'>
<div class='row'>
<div class="col-md-5 col-sm-12 col-xs-12">
<div class='text-center'>
<h2 class="title"> Title</h2>
</div>
</div>
<!--//col-->
<div class='col-md-7 col-sm-12 col-xs-12'>
<div class='text-center'>
<img src = "http://i.imgur.com/g4sTWMZ.png" class = 'fluid-img'>
</div>
</div>
</div>
</div>
</div>
there is nothing wrong with the code.. the image you are using has huge blank space at the right side as it's a png image you cannot see it.. download the image and crop it.. your problem is solved
To better Scale your Image you should use img-responsive calss of bootstrap.
Your image ends before the right edge because it contains transparent pixels at the right side, I cropped your image and now it looks fine.
Your image was not getting centered because of the transparent pixels at the right side.
.fluid-img {
width: 100%;
height: auto;
}
.back {
padding-top: 150px;
overflow: hidden;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<div class = 'back'>
<div class = 'container-fluid'>
<div class='row'>
<div class="col-md-5 col-sm-12 col-xs-12">
<div class='text-center'>
<h2 class="title"> Title</h2>
</div>
</div>
<!--//col-->
<div class='col-md-7 col-sm-12 col-xs-12'>
<div class='text-center'>
<img src = "http://i.imgur.com/FFeYNDn.png" class= 'fluid-img img img-responsive'>
</div>
</div>
</div>
</div>
</div>
I want to show the image in the background but it doesn't show:
<div class="jumbotron jumbotron-fluid background: url('/assets/img/mhacks.jpg') no-repeat center center;">
<div class="container text-sm-center p-t-3">
<h1 class="display-2">Mona Jalal</h1>
<p class="lead">Under construction</p>
</div>
</div>
What I see is:
P.S.: In general how can I debug such faults?
Here's my jsfiddle:
https://jsfiddle.net/e5qsnjdo/
With the following code:
<div class="jumbotron jumbotron-fluid style="background-image: url('/assets/img/mhacks.jpg') no-repeat center center;">
<div class="container text-sm-center p-t-3">
<h1 class="display-2">Mona Jalal</h1>
<p class="lead">Under construction</p>
</div>
</div>
I get these errors:
Move your background property to style attribute:
<div class="jumbotron jumbotron-fluid" style="background: url('/assets/img/mhacks.jpg') no-repeat center center;">
Or define in css as follows:
.jumbotron {
background: url('./assets/img/mhacks.jpg') no-repeat center center;
}
// notice the . before /assets if you don't use the . it will give the 404 error -
<div class="jumbotron jumbotron-fluid" style=" background: url('/assets/img/mhacks.jpg') no-repeat center center;">
<div class="container text-sm-center p-t-3">
<h1 class="display-2">Mona Jalal</h1>
<p class="lead">Under construction</p>
</div>
</div>
You could try this : change your CSS properties from background to background-image.
e.g. background-image: url("/assets/img/mhacks.jpg" ) cover no-repeat;
Is it possible to use 2 responsive images side by side with same height with Bootstrap 3? At the moment the col-sm-4 hasn't the same height.
<div class="container">
<div class="row">
<div class="col-sm-4">
<img class="img-responsive" src="http://placehold.it/400x400" />
</div>
<div class="col-sm-8">
<img class="img-responsive" src="http://placehold.it/800x400" />
</div>
</div>
</div>
Demo Fiddle: http://jsfiddle.net/u9av6/3/
Thanks!
try this:
<div class="col-sm-4"><img src="http://placehold.it/400x400" height="220" /></div>
<div class="col-sm-8"><img src="http://placehold.it/800x400" height="220" /></div>
Here's a working version, with jsfiddle demo.
<div class="col-sm-4"><img style="max-height:220px" src="http://placehold.it/400x400" /></div>
<div class="col-sm-8"><img style="max-height:220px" src="http://placehold.it/800x400" /></div>
Maybe your problem is that in your code, the padding is not considering.
Your 400px and 800px is nice, but with padding considering it's not good.
In this fiddle : http://jsfiddle.net/Lrc5t/1/ , with no padding, they keep the same height. But it's not nice without padding...
The padding in each .row is 15px left and right.
html:
<div class="row">
<div class="col-sm-4 nopadding"><img class="img-responsive" src="http://placehold.it/400x400"></div>
<div class="col-sm-8 nopadding"><img class="img-responsive" src="http://placehold.it/800x400"></div>
</div>
css:
.nopadding{
padding-left: 0px !important;
padding-right:0px !important;
}
UPDATE :
fiddle : http://jsfiddle.net/Lrc5t/2/
Without paddding is not nice so , just inverse in adding extra padding to right image :
<div class="row">
<div class="col-sm-4"><img class="img-responsive" src="http://placehold.it/400x400"></div>
<div class="col-sm-8 nopadding-two"><img class="img-responsive" src="http://placehold.it/800x400"></div>
</div>
.nopadding-two{
padding-right:45px !important;
}
ps : You can choose to add your padding at left instead or right... in order to keep the padding in middle. And... nopadding-one and text-right class are to delete...(I forgot)...
UPDATE AFTER COMMENT:
*Why 45px ?*
Image 1 is float:left so it has just the padding-right at 15px
Image 2 has padding left and right at 15px {=30px}
So in order do equality (to get same constraints) you need to transmit the total padding to image 2
To make the images displaying side by side, you need to do three things:
1st: make all your images responsive in the html file like this:
<div class="row">
<div class="col-xs-3 left-image" >
<img class="img-responsive" src="../img/fourthimg.jpg">
</div>
<div class="col-xs-9 right-image">
<img class="img-responsive" src="../img/firstimg.jpg" >
</div>
</div>
This is for putting two images side by side. You could have as many images as possible.
2nd: Inside your css, give the height to these images like this:
.img-responsive {display:block; height: 600px; width: 100%;}
The width is set to 100% meaning that both (for this example)/all the images would cover the 100% part of the column width provided in your html code.
3rd (Most important) : CSS has this property to automatically leave margins/paddings on right and left when you put an image inside a div and this padding is associated with the image or any other element that you want to put inside a div.
To tackle this, go to you css file and for each image, set the left-padding and right padding to 0px just like this:
.right-image{
padding-left:0px;
padding-right:0px;
}
.left-image{
padding-right: 0px;
padding-left: 0px;
}
This is a working example and explanation of how to put in images side by side using bootstrap!
Check this code. This code will look for the smallest height of the image and set it as max-height of the other images. The rest of the image will be hidden. Check it out.
<script>
setTimeout(function () {
equalheight('.portfolio-item');
}, 3000);
function equalheight($that) {
$minHeight = 0;
$($that).each(function (index) {
$thisHeight = $(this).children('.portfolio-link').innerHeight();
if ($minHeight == 0) {
$minHeight = $thisHeight;
} else {
if ($minHeight > $thisHeight) {
$minHeight = $thisHeight;
}
}
});
$($that).children('.portfolio-link').css('max-height', $minHeight);
$($that).children('.portfolio-link').css('overflow', 'hidden');
}
</script>
My html is
<div class="col-md-4 col-sm-6 portfolio-item">
<a href="#portfolioModal1" class="portfolio-link" data-toggle="modal" style="max-height: 225px; overflow: hidden;">
<div class="portfolio-hover">
<div class="portfolio-hover-content">
<i class="fa fa-plus fa-3x"></i>
</div>
</div>
<img src="images/trip-01.jpg" class="img-responsive" alt="">
</a>
<div class="portfolio-caption">
<h4>Round Icons</h4>
<p class="text-muted">Graphic Design</p>
</div>
</div>
<div class="col-md-4 col-sm-6 portfolio-item">
<a href="#portfolioModal2" class="portfolio-link" data-toggle="modal" style="max-height: 225px; overflow: hidden;">
<div class="portfolio-hover">
<div class="portfolio-hover-content">
<i class="fa fa-plus fa-3x"></i>
</div>
</div>
<img src="images/trip-02.jpg" class="img-responsive" alt="">
</a>
<div class="portfolio-caption">
<h4>Startup Framework</h4>
<p class="text-muted">Website Design</p>
</div>
</div>
if you want constant height, should add these properties:
height: 200x ; # any constant height
object-fit: cover;
Or else you want width constant, should add these properties:
width: 200px ; # any constant height
object-fit: cover;
object-fit: cover, fixed the problem of stretching up of the image in my case.