Giving camuflage to home page image that isn't wide enough - html

Question

I am trying to make one of these modern designs where there's a carousel of images in the top of the home page of the webpage.
I am using Bootstrap 3 and so far I have managed to make it behave the way it should, but I feel like that's only going to happen in my screen, because I worked partially with fixed proportions so the images would look perfect in my screen, so they all have the same width and height. Here's how it looks:
If these images are displayed in a thinner screen I guess there would be no problem, or would there? I still have to test this, but I am pretty sure that there would not be any problem; anyway this is not that much of a concern for me right now, I am focused in the other issue. But if they're displayed in a wider screen an ugly border will appear, just like this:
That looks really bad, I think that I should center the image and treat those borders in a way that goes well along with the image, like if both image and borders were one whole. Any ideas?
Also I would need to reposition the carousel slide buttons to be fitted in the image instead outside. I am not that sure about how to do that either.
Here the code in case you need it:
<!-- Carousel -->
<div class="this-centrar-contenido this-margen-vertical">
<div id="carousel-inicio" class="carousel slide" data-ride="carousel">
<!-- Indicators -->
<ol class="carousel-indicators">
<li data-target="#carousel-inicio" data-slide-to="0" class="active"></li>
<li data-target="#carousel-inicio" data-slide-to="1"></li>
<li data-target="#carousel-inicio" data-slide-to="2"></li>
<li data-target="#carousel-inicio" data-slide-to="3"></li>
<li data-target="#carousel-inicio" data-slide-to="4"></li>
</ol>
<!-- Wrapper for slides -->
<div class="carousel-inner">
<div class="item active">
<img src="img/img1.jpg">
<div class="carousel-caption">
text
</div>
</div>
<div class="item">
<img src="img/img2.jpg">
<div class="carousel-caption">
text
</div>
</div>
<div class="item">
<img src="img/img3.png">
<div class="carousel-caption">
text
</div>
</div>
<div class="item">
<img src="img/img4.png">
<div class="carousel-caption">
text
</div>
</div>
<div class="item">
<img src="img/img5.png">
<div class="carousel-caption">
text
</div>
</div>
</div> <!-- /.carousel-inner -->
</div> <!-- /#carousel-inicio -->
<!-- Controls -->
<a class="left carousel-control" href="#carousel-inicio" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left this-icono-grande"></span>
</a>
<a class="right carousel-control" href="#carousel-inicio" data-slide="next">
<span class="glyphicon glyphicon-chevron-right this-icono-grande"></span>
</a>
</div> <!-- /.col-md-12 -->
<!-- /Carousel -->
And custom css (the rest is Bootstrap 3 default for carousels)
.carousel-control
{
height: 600px;
}

Answer 1

For fitting the images I would use the images as background-images for each div.item, and set background-size: cover; in the css. For that each div.item needs an id or a specific class:
HTML:
<!-- Wrapper for slides -->
<div class="carousel-inner">
<div id="img_1" class="item active">
<div class="carousel-caption">
text
</div>
</div>
<div id="img_2" class="item">
<div class="carousel-caption">
text
</div>
</div>
...
<div id="img_5" class="item">
<div class="carousel-caption">
text
</div>
</div>
</div> <!-- /.carousel-inner -->
CSS:
#img_1 {
background: url('img/img1.png') no-repeat center center;
background-size: cover;
}
#img_2 {
background: url('img/img2.png') no-repeat center center;
background-size: cover;
}
...
#img_5 {
background: url('img/img2.png') no-repeat center center;
background-size: cover;
}
Now, you won't have any problem with the different viewports. Change the size of your browser's window to test it.