Maintenir le rapport d’aspect de l’image dans le carrousel

J’utilise Bootstrap pour créer un carrousel, j’ai de grandes images alors quand l’écran est plus petit que l’image, le ratio n’est pas conservé.

Comment pourrais-je changer cela?

Voici mon code:

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

http://jsfiddle.net/DRQkQ/

J’ai besoin que l’image corresponde à une largeur de 100%, mais gardez sa hauteur de 500 pixels (je pense que c’est 500 pixels). Cela signifie que sur un petit écran, nous ne voyons pas l’extrême gauche et l’extrême droite.

J’ai essayé de contenir l’image dans un div et d’append

 overflow: hidden; width: 100%; height: 500px; display: block; margin: 0 auto; 

Mais ça ne marche pas

Je vous remercie!

Le problème réside ici, sur le bootstrap CSS:

 img { max-width: 100%; width: auto 9; height: auto; vertical-align: middle; border: 0; -ms-interpolation-mode: bicubic; } 

Ayant défini la max-width: 100%; l’image ne sera pas plus grande que la fenêtre d’affichage. Vous devez remplacer ce comportement sur votre CSS:

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

Notez le max-width: none; ajouté en bas. C’est la valeur max-width par défaut et désactive la limite.

Voici votre violon mis à jour.

Je pense qu’il vaut mieux le manipuler avec l’atsortingbut d’ object-fit CSS3.

Si vous avez une image avec une largeur et une hauteur fixes et si vous souhaitez conserver le rapport hauteur / largeur, vous pouvez utiliser object-fit:contain; . Il maintiendra le rapport avec la hauteur et la largeur données.

Par exemple :

 img { height: 100px; width: 100px; object-fit: contain; } 

Vous pouvez trouver plus de détails ici: http://www.creativebloq.com/css3/control-image-aspect-ratios-css3-2122968

J’espère que cela sera utile à quelqu’un.

Supprimez la balise img dans l’élément du carrousel et ajoutez un arrière-plan. De cette façon, vous pouvez utiliser la propriété de couverture 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; } 

J’ai pu y parvenir en commentant la ligne de hauteur de la ligne carousel.css, comme indiqué ci-dessous:

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

Ce code a finalement fonctionné pour moi:

 .carousel .item { background:#F9F9F9; border:1px solid #E0E0E0; overflow:hidden; margin-bottom:1em; margin-top:1em; padding:5px; } .carousel-inner > .item > img { border: 1px solid #DDDDDD; float: left; margin: 0pt 3px; padding: 2px; height: none; width: 100%; } .carousel-inner > .item > img:hover { border: 1px solid #000000; } 

pour maintenir le rapport hauteur / largeur et la couverture complète du carrousel div:

 img { object-fit: cover; overflow: hidden; } 

Apparemment, les solutions mentionnées ci-dessus ne fonctionnaient pas pour moi (je ne sais pas pourquoi?) Mais j’ai trouvé une autre solution en utilisant javascript.

Fondamentalement, cette méthode est plus fastidieuse mais fonctionne également. Vous utilisez jQuery pour définir la hauteur du carrousel sur la largeur divisée par un certain format.

Voici mon code:

  var aspectRatio = 2.5; //Width to Height!!! var imageWidth; var imageHeight; //bind the window resize event to the method - //change in carousel width is only sortingggered when size of viewport changes $(window).on("resize", methodToFixLayout); //updates the carousel width when the window is resized function methodToFixLayout(e){ imageWidth = carousel.width(); console.log(""); console.log("Method width" + imageWidth); console.log(""); imageHeight = imageWidth / aspectRatio; carouselContainer.height(imageHeight); carousel.height(imageHeight); carouselPic.height(imageHeight); //solve the carousel glitch for small viewports - delete the carousel windowWidth = $(window).width(); if (windowWidth < 840){ carousel.hide(); $("#side-navbar").hide(); } else { carousel.show(); $("#side-navbar").show(); } } 

Cela semble fonctionner pour moi bien.

J'espère que ça marchera pour toi aussi.

Vous pouvez soit définir vous-même les proportions, soit utiliser une autre méthode. Tout d'abord, définissez la largeur et la hauteur de la fenêtre sur une dimension de vue où l'image apparaît bien formatée. Interrogez la largeur et la hauteur et déterminez le ratio. Ramenez la fenêtre à la largeur et à la hauteur d'origine. L'utilisateur ne remarquerait pas le changement mais les dimensions seraient enregistrées.

Comme d’autres l’ont mentionné, css3 fonctionne parfaitement pour cela. J’ai utilisé la pleine largeur, hauteur fixe pour le conteneur, puis mis à l’échelle le rapport d’aspect de l’image avec ‘cover’, puis jeté le débordement:

 .carousel .carousel-inner img { width: 100%; height: 30em; object-fit: cover; overflow: hidden; }