Twitter Bootstrap: Have carousel images full width and height

Question

this seems as a trivial question but after a couple of hours fiddling with the Twitter Bootstrap carousel in their example (http://twitter.github.io/bootstrap/examples/carou

Answer 1

Though this dates back 3 years, solution given by 'Nate Beers' solved my problem, when using Bootstrap 3.3.7

Its because 'max-width' sets the maximum width of the element which overrides width property when width is greater than max-width.

Also 'min-width' always overrides the 'max-width'.

Here is an example in codepen, resize the preview window to see how it works.

Check the below element in particular by resizing to the smallest possible width and compare with 2 other elements i1 and i2.

Sample