Tenemos la mejor información que hallamos por todo internet. Queremos que te sirva de ayuda y si deseas compartir algo que nos pueda ayudar a crecer hazlo con total libertad.
Solución:
El problema radica aquí, en bootstrap CSS:
img
max-width: 100%;
width: auto 9;
height: auto;
vertical-align: middle;
border: 0;
-ms-interpolation-mode: bicubic;
Habiendo establecido max-width: 100%; la imagen no será más grande que la ventana gráfica. Debe anular ese comportamiento en su CSS:
.carousel img
position: absolute;
top: 0;
left: 0;
min-width: 100%;
height: 500px;
max-width: none;
Nota la max-width: none; añadido en la parte inferior. Este es el valor predeterminado de ancho máximo y anula el límite.
Aquí está tu violín actualizado.
Creo que es mejor manejarlo con CSS3 object-fit attribute.
Si tiene una imagen con ancho y alto fijos y aún así desea conservar la relación de aspecto, puede usar object-fit:contain;. Mantendrá la relación con la altura y el ancho dados.
Por ejemplo :
img
height: 100px;
width: 100px;
object-fit: contain;
Puede encontrar más detalles aquí: http://www.creativebloq.com/css3/control-image-aspect-ratios-css3-2122968
Espero que esto sea útil para alguien.
Eliminar el img etiqueta dentro del elemento del carrusel y agrega un fondo. De esta manera, puede usar la propiedad de portada de CSS3.
.item1
background: url('bootstrap/img/bg.jpg') no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;