Crop Image Sides as Browser Width Decreases in Bootstrap Carousel

Crop Image Sides as Browser Width Decreases in Bootstrap Carousel

The following did the trick:

.carousel.slide{
    max-width: 1600px; //the largest you want the image to stretch
    min-width: 900px; //the "container" width 
    overflow: hidden;
}
.carousel-inner{
   width: 1600px;
   left: 50%;
   margin-left: -800px;
}

The key is the left: 50% and margin-left: -800px combo. The negative margin should be half of what the max width is(in this case, 1600px).

Twitter Bootstrap carousel image appears distorted

You have:

.carousel .item>img {
  position: absolute;
  top: 0;
  left: 0;
  min-width: 100%;
  height: 500px;
}

Change the height to 100%.

Image crop from both sides and stay center

We can achieve this with background-image property.

http://codepen.io/asim-coder/pen/YywaeB

HTML:

<footer class="site-footer">
</footer>

CSS:

.site-footer {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  text-align: center;
  overflow: hidden;
  background-image: url(http://lorempixel.com/500/60);
  height: 60px;
  background-size: cover;
  background-position: center center;
}

How to fully fit an image inside carousel(Bootstrap)

Set Image width:100%

.item img {
  width:100%
}

Here is Demo: https://jsfiddle.net/u9kkdLzb/

Dotted overlay over image to scale when bootstrap carousel size changes

You should be using max-height property to prevent this behavior

.carousel, .carousel-inner {
    max-height: 350px;
}

This way, you are assigning an height of say maximum of 350px. Using height: 350px; fixes the height for that particular element which later causes the overlay image to overflow.

Demo

How to make bootstrap carousel image responsive?

Remove the following CSS rules from respective files:

In home.php file

.carousel .item>img {
    position: absolute;
    top: 0;
    left: 0;
    max-width: 100%;
    height: 100%;
}

in carousel.css

.carousel-inner > .item > img {
    position: absolute;
    top: 0;
    left: 0;
    min-width: 100%;
    height: 500px;
}

Also, add margin-top: 51px; to .carousel class in carousel.css file and remove height:500px from the same class, because you have fixed navbar.

Boostrap template scalling image slider

The height of the .carousel-item elements is set to be height: 65vh or min-height: 300px, whichever is greater. So when you start narrowing the display, the aspect ratio of the image will start breaking, as there is not much variation on the viewport's height, which is the determining factor.

To respect aspect-ratio on smaller devices, you should add a max-height property and set it to 56.25vw (100 times 9 divided 16, given that the width of the image will always be 100 of viewport's width), this way ensuring you'll always get a 16:9 aspect-ratio (assuming that the site, like the template, will always use 1920x1080 images).

.carousel-item {
    height: 65vh;
    min-height: 300px;
    max-height: 56.25vw;
    /* other stuff... */
}

This way you'll ensure aspect-ratio is respected on smaller screens, while you avoid respecting it on larger displays, where keeping the image at its aspect-ratio would cause it to overflow to the bottom of the screen.

We still have the min-height attribute, that will always be preferred by the browser before max-height, so on very small screens it will still adjust our height to 300px. We can avoid that simply by removing it:

.carousel-item {
    height: 65vh;
    max-height: 56.25vw;
    /* other stuff... */
}

If we'd want to force the aspect-ratio on all screens, we should remove the max-height property and set our height property to 56.25vw:

.carousel-item {
    height: 56.25vw;
    /* other stuff... */
}

Regarding the text, if we want it to show on smaller screens we must remove the display classes () from the div.carousel-caption element:

<div class="carousel-item" style="background-image: url('http://placehold.it/1900x1080')">
  <div class="carousel-caption">
    <h3>Second Slide</h3>
    <p>This is a description for the second slide.</p>
  </div>
</div>

Background image to fill background when browser fully opened, and crop when closed

body { 
    background-image: url("image.jpg");
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
}

Centers the background image on the page.

---

Related Topics