Clicking image of Bootstrap carousel looks distorted

Question

I am building a website based on a theme created using Twitter Bootstrap: http://demo.graphikaria.com/agilis/theme .

Whenever I reduce the width of my browser, the background image for the carousel of the home page is distorted.

For the standard shaded background image used by the template, this does not really matter, but if you want to use a clear image or logo, it will be distorted or curled.

Answer 1

You have:

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

Change the height to 100% .

Answer 2

If you use the IMG tag, it will always be larger than its DIV container. Because bootstrap resizes fixed images to fit liquids, especially on mobile devices, the images are curled to the width of the screen.

An alternative that seems to work so far for me is to use a <div> tag with a background image.

Grade:

 .carousel-inner > .item > .carousel-image { width: 100%; height: 500px; text-align: center; align: center; } 

Product code:

 #csl-item1 { background:url(img/carousel_image1.jpg); background-repeat: no-repeat; background-position: center top; } 

Paragraph:

 <div class="item active"> <div id="csl-item1" class="carousel-image">&nbsp;</div> <div class="container"> <div class="carousel-caption"> <!-- Caption --> </div> </div> </div> 

I would be interested to know if anyone has errors with this tho method, so let me know if you think this is a bad idea ...

Answer 3

The cleanest solution I've found adds this css to your image on the slide:

 object-fit: cover; overflow: hidden; 

You can even add it to the img line:

 <img style="object-fit: cover; overflow: hidden;" class="first-slide" src="/images/beach.jpg" alt="sunny day at the beach"> 

There's a great entry that shows examples of CSS3 properties and their effect on image proportions here: http://www.creativebloq.com/css3/control-image-aspect-ratios-css3-2122968

Answer 4

Looking at it in Chrome, the default max-width: 100% doesn't seem like what you want.

In your CSS, you can add to the already defined rules that the browser uses the default value.

 .carousel .item > img { max-width: none } 

It's worth noting that you specify min-width: 100% in combination with absolute height , so on large screens (like mine, 1080p) it will still distort the image if it gets too wide, which will change the aspect ratio and distort the image again .

Answer 5

OK, the best I could do was ...

 /* Carousel base class */ .carousel { height: auto; margin-bottom: 60px; } /* Since positioning the image, we need to help out the caption */ .carousel-caption { z-index: 35; } /* Declare heights because of positioning of img element */ .carousel .item { background:#e64c6c; border:.5px solid #e7c1af; overflow:hidden; padding:3px; min-height: 500px; } .carousel-inner > .item > img { float:right; padding: 2px; padding-left: 3px; min-width: 500px; } .carousel-inner > .item > img:hover { border: 1px solid #e7c1af; } 

Answer 6

With bootstrap 3.3.7, I could fix this problem by simply deleting the 'height' line in carousel.css here:

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

Answer 7

In my case, the image was distorted when the screen size increased. I worked with one of the free Bootstrap templates ( https://startbootstrap.com/ ) using Bootstrap 4.

Based on the answer above from Ira Herman (and I would comment if I had enough credit points), I ended up with the code below to solve my problem:

 .carousel-item { height: 32rem; background-color: #777; } .carousel-item > img { position: absolute; top: 0; right: 0; min-width: 100%; height: 32rem; object-fit: cover; overflow: hidden; object-position: 20% 19%; } 

The coordinates of the object’s coordinates and position can be changed depending on how you want the image to increase, decrease. Correcting the image on the right also helped me in my case. Hope this helps.