Center slider images without changing aspect ratios

Who changes the aspect ratio?

I guess I was thinking wrong Here’s my site its chopping the top of the images I want them to be centered and scaled “keeping aspect ratio” to fit the height of the slider. and change the background of the slider to a color

The aspect ratio is preserved.
Anyway you’re using a bootstrap.css which, I see, prevents the full-width.
Said so, you say “keeping aspect ratio to fit the height of the slider”… and this happens, in some circumstances ?? :

When you chose slider in full-width I suppose you want to ensure … the full width, otherwise you would not have chosen that.
In this case, normal customizr behavior (without additional css), is to have the width of the slide image at 100%. This way the browser will (keeping the aspect ratio) enlarge it (if needed), and the new customizr feature to center the slides will ensure the image will be centered in the slider container. -> chopping effect top/bottom.

But what to do when the image height is smaller than the container? We have two choices, always keeping the aspect ratio: a) make its height match the container -> possible chopping effect left/right b) just center it in the container -> possible large gaps top/down .
Or a third alternative .. make the container’s height as the same as the smaller slide in our slider, and then center the others.

I chose the a)

But almost everything can be improved ??

I want the full size slider but I want the images scaled to height not width.

What I want when image cant fill the page

What I want when image can fill the page without cropping

What happens when full width isnt selected and image can fit page without cropping

Actual image which should be able to fill the page

I want to be Bob Dylan (cit.)

1) The first image should fill the page in width, but e.g you don’t have this rule in your css:

.carousel-image img {
width: 100%;
}

And I can also see, you’re running 3.1.11 but you use a css for 3.1.6, so maybe you changed it, and who knows what you did. This in your blue.css :

/*
 * Customizr v3.1.6
 *

2) keeping the aspect ratio, normal customizr behavior: if the image height is greater than the cointainer then the image will be “cropped”. The browser resize the image to let it fit the window in width, then also the height will increase, so you’ll have the cropping. Using that feature for centering slides, you’ll just center it, but can’t avoid the cropping. It’s impossible (at least as it is for me to become bob dylan).

3) The last image you linked of course is able to fill the page in width but is 383×109 , let’s do some math:
If I have a screen with an available resolution of 1349px in width.
– Normal customizr behavior: width 100%, so width of that image 1349px, aspect ratio preserved (the browser does it), so height 1349/383*109=383.9px . So the height of this image is smaller than the container height (you set it at 450px) => gaps !
– Using the script for centering images: the aim is to vertically center images with an height greater than the container height, BUT if the image height is smaller than the container height then the image height will be changed to fit the container height ->(preserving aspect ratio)-> image width will be increased -> the image will be horizontally centered. Probably in further releases will be given the opportunity to avoid this last behavior leaving just the vertically centering.

So, for the moment, use a correct css and disable that feature ??

Signed,
Bob Dylan wannabe

So there no way to scale a image down to fit the container height and center it?

Got my customizr css updated to 3.1.6.

badincite, probably I’m missing something.
You’re using customizr 3.1.11 but your css is from 3.1.6 and it’s not even that, ’cause I think you changed it.
Here the original 3.1.6:
https://themes.trac.www.ads-software.com/browser/customizr/3.1.6/inc/css/blue.css#L6624

Here your “custom” version:

.carousel-image {

height: 450px;

}
.carousel-image img {
  height: 450px;
  width: auto;

  background-color: 000000;
}
.carousel-image.slider-full img {
  height: 450px;
  width: auto;
  background-color: 000000;
}

And this is about css.
About the other question, of course you can.
but
Without using the centering slides feature:
If you want the slider to fit the full-width then the height depends on the image ratio,
You want the image fits the height of the container? Then the width will depend on the image ratio, again.
It’s obvious isn’t it?

If you want you can do almost everything you want with css and/or jquery.

Ahh I had my old css one saved in there so I could check the changes and forgot to switch it back. I thought the centering feature only does it vertically correct?

Which part needs to be changed to center and fit the height of the container

* Customizr v3.1.11
.carousel {
  margin-bottom: 0px;
}
.carousel .container {
  position: relative;
  z-index: 9;
  width: auto;
}
.carousel-inner > .active {
  /* Fix slider in IE */
  z-index: 9\9;
  /*hack IE 8 and below */

}
.carousel-control {
  height: 80px;
  top: 44%;
  margin-top: 0;
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 120px;
  text-shadow: 0 1px 1px rgba(0, 0, 0, 0.4);
  background-color: transparent;
  border: 0;
  z-index: 10;
  *line-height: 72px;
  /* hack IE7 and below */

}
.carousel .item {
  line-height: 450px;
  overflow: hidden;
  min-height: 450px;
}
.carousel .item > span {
  *zoom: 1;
  /* layout hack IE7 and below */

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

}
.carousel-image img {
  width: 100%;
  /* max-height: 100%; */

}
.carousel-image.slider-full img {
  max-width: 100%;
}
.carousel-caption {
  background-color: transparent\9;
  /* IE8 and below */
  background: rgba(0, 0, 0, 0.2);
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#33000000', endColorstr='#33000000', GradientType=0);
  /* IE6-9 */
  max-width: 60%;
  padding: 5%;
  line-height: 14px;
  vertical-align: middle;
  *top: 25%;
  /*hack IE7 and below */
  display: inline-block;
  position: relative;
  margin-left: 11%;
  /*display:inline; IE7 and below */

}
.carousel-caption h1,
.carousel-caption .lead {
  margin: 0;
  line-height: 1.25;
  color: white;
  text-shadow: 0 1px 1px rgba(0, 0, 0, 0.4);
}
.carousel-caption .btn {
  margin-top: 10px;
}
.slider.edit-link {
  position: absolute;
  bottom: 40px;
  right: 50px;
}
/* If automatic centering is enabled */

.carousel > .center-slides-enabled > .item > .carousel-image img {
  display: block;
  position: relative;
}