---

Moin Leute, ich habe folgende Frage bzw Anliegen, ich möchte den Carouselbildern eine feste Größe zuweisen ích habe es Probier kleinere Bilder zu beutzten aber diese zoomt das Script immer wieder auf die Grösse des Bildschirms Also 1920 x Irgendwas ich würde es lieber haben wenn die Bilde nicht so in die Tiefe gehen würde also sowas wie 1920x 400 oder so etwas in der Art eben. Ich hoffe mir kann da einer eben bei helfen Gruß Toby

---

Keiner eine IDEE?

---

Moin, öffne die css dazu ( includes/plugins/carousel/css/carousel.css ).

/* Declare heights because of positioning of img element */
.carousel-item { height: 22rem; background-color: #777; }
.carousel-item > img { position: absolute; top: 0; left: 0; min-width: 100%; height: 22rem; }

in

/* Declare heights because of positioning of img element */<br />
.carousel-item { height: 10rem; background-color: #777; }<br />
.carousel-item &gt; img { position: absolute; top: 0; left: 0; min-width: 100%; height: 10rem; }

ändern aber dann wäre alles auf der sogannten höhe ;) Du musst mit rem-Befehlen rumspielen =). Ich könnte mal gucken ob man es automatisiert hinbekommt aber nicht jetzt ^_^. LG

---

Also habe mal in der CSS erstmal das umgestellt was du geschrieben hast, hat leider keinerlei Effekt. Ich habe auch andere Bilder genommen mit anderen Größen ist leider immer noch die selbe Größe in der Darstellung. Habe dann andere Werte geändert auch keinerlei Änderung der Darstellung. Vielleicht muss man da noch andere Werte in anderen Dateien ändern damit es Wirkung zeigt finde aber keine weiteren Einstellungen diesbezüglich. Falls es sich nicht umstellen lassen sollte muss ich mir eine andere Lösung überlegen. Danke dir erst mal für die Hilfe bis hierhin vllt. haste ja noch ne anderen Idee wo was einzustellen ist. Gruß Toby

---

Warum das nicht geklappt hat bei dir müsste man selber sehen wenn du uns einen Link geben würdest. Versuche mal das (Höhe 400px):

/* Declare heights because of positioning of img element*/
.carousel-item { height: 400px !important; background-color: #777; }
.carousel-item > img { position: absolute; top: 0; left: 0; min-width: 100%; height: 400px !important; }

---

Danke dir das hat geklappt jetzt super. Dann weiß ich wie ich das nun anpassen kann. Also nochmal danke und schönes WE euch. Gruß Toby

---

schon lustig bei mir klappte das mit dem rem aber mit der px wie vorgeschlagen nicht :D Funny. Naja hauptsache es geht nun =)

---

I have modified the  carousel.css  to resize according to the resolution, it works well for me, tell me if it works for you too.
 

/* CAROUSEL SETTINGS */ 
/* Carousel Styles */ 
/* CUSTOMIZE THE CAROUSEL Extra large devices (large desktops, 1200px and up) */ 
@media (min-width: 1200px) { .carousel { } 
.carousel-caption { bottom: 2rem; z-index: 10; } 

.carousel-item > img { top: 0; left: 0; margin-top: 30px; } 
.carousel-caption .hs-text { display: table-cell; vertical-align: middle; } 
.carousel-caption .hs-text h1 { color: #fff; font-weight: 400; font-size: 70px; margin-bottom: 20px; position: relative; top: 30px; opacity: 0; } 
.carousel-caption .hs-text h1 span { color: #fe821d; } 
.carousel-caption .hs-text p { color: #fff; font-size: 20px; margin-bottom: 10px; position: relative; top: 20px; opacity: 0; } 
.btn-mobile {background-color:#ef7f1a;border-color:#fe821d;box-shadow:none;color:#fff;width: 8em;height: 2.5em;font-size:19px;padding-bottom: 20px;} 
.btn-mobile:hover{color:#fff;background-color:#e76901;border-color:#fe821d;box-shadow:0 5px 15px rgba(0,0,0,.05),0 4px 10px rgba(255,161,0,0.5)} 
.btn-mobile.focus,.btn-mobile:focus{color:#fff;box-shadow:0 0 0 3px rgba(0,123,255,.15),0 3px 15px rgba(0,123,255,.2),0 2px 5px rgba(0,0,0,.1)} 
.btn-mobile.disabled,.btn-mobile:disabled{color:#fff;background-color:#ef7f1a;border-color:#007bff;box-shadow:none;cursor:not-allowed} 
.btn-mobile .h7 { vertical-align: middle; text-align: center; } 
.featurette-divider { margin: 5rem 0; } 
.featurette-heading { font-weight: 300; line-height: 1; letter-spacing: -.05rem; } 
.carousel-indicators .active { background-color: #fe821d; } 
.carousel-control .icon-prev, .carousel-control .icon-next, .carousel-control .fa-chevron-left, .carousel-control .fa-chevron-right { position: absolute; top: 50%; z-index: 5; display: inline-block; margin-top: -10px; } 
.carousel-control .icon-prev, .carousel-control .fa-chevron-left { left: 50%; margin-left: -10px; } 
.carousel-control .icon-next, .carousel-control .fa-chevron-right { right: 50%; margin-right: -10px; } 
.carousel-control .icon-prev, .carousel-control .icon-next { width: 20px; height: 20px; font-family: serif; line-height: 1; } 
} 
/*Large devices (desktops, 992px and up) */ @media (min-width: 992px) and (max-width: 1199px) { 
.carousel { } 
.carousel-caption { bottom: 2rem; z-index: 10; } 
.carousel-item > img { top: 0; left: 0; margin-top: 30px; } 
.carousel-caption .hs-text { display: table-cell; vertical-align: middle; } 
.carousel-caption .hs-text h1 { color: #fff; font-weight: 400; font-size: 50px; margin-bottom: 20px; position: relative; top: 30px; opacity: 0; } 
.carousel-caption .hs-text h1 span { color: #fe821d; } 
.carousel-caption .hs-text p { color: #fff; font-size: 19px; margin-bottom: 10px; position: relative; top: 20px; opacity: 0; } 
.btn-mobile {background-color:#ef7f1a;border-color:#fe821d;box-shadow:none;color:#fff;width: 8em;height: 2.5em;font-size:15px;padding-bottom: 20px;} 
.btn-mobile:hover{color:#fff;background-color:#e76901;border-color:#fe821d;box-shadow:0 5px 15px rgba(0,0,0,.05),0 4px 10px rgba(255,161,0,0.5)} 
.btn-mobile.focus,.btn-mobile:focus{color:#fff;box-shadow:0 0 0 3px rgba(0,123,255,.15),0 3px 15px rgba(0,123,255,.2),0 2px 5px rgba(0,0,0,.1)} 
.btn-mobile.disabled,.btn-mobile:disabled{color:#fff;background-color:#ef7f1a;border-color:#007bff;box-shadow:none;cursor:not-allowed} 
.btn-mobile .h7 { vertical-align: middle; text-align: center; } 
.featurette-divider { margin: 5rem 0; } 
.featurette-heading { font-weight: 300; line-height: 1; letter-spacing: -.05rem; } 
.carousel-indicators .active { background-color: #fe821d; } 
.carousel-control .icon-prev, .carousel-control .icon-next, .carousel-control .fa-chevron-left, .carousel-control .fa-chevron-right { position: absolute; top: 50%; z-index: 5; display: inline-block; margin-top: -10px; } 
.carousel-control .icon-prev, .carousel-control .fa-chevron-left { left: 50%; margin-left: -10px; } 
.carousel-control .icon-next, .carousel-control .fa-chevron-right { right: 50%; margin-right: -10px; } 
.carousel-control .icon-prev, .carousel-control .icon-next { width: 20px; height: 20px; font-family: serif; line-height: 1; } 
} 
/* Medium devices (tablets, 768px and up) */ 
@media (min-width: 768px) and (max-width: 991px) { 
.carousel { } 
.carousel-caption { bottom: 2rem; z-index: 10; } 
.carousel-item > img { top: 0; left: 0; margin-top: 30px; } 
.carousel-caption .hs-text { display: table-cell; vertical-align: middle; } 
.carousel-caption .hs-text h1 { color: #fff; font-weight: 400; font-size: 40px; margin-bottom: 20px; position: relative; top: 30px; opacity: 0; } 
.carousel-caption .hs-text h1 span { color: #fe821d; } 
.carousel-caption .hs-text p { color: #fff; font-size: 18px; margin-bottom: 10px; position: relative; top: 20px; opacity: 0; } 
.btn-mobile {background-color:#ef7f1a;border-color:#fe821d;box-shadow:none;color:#fff;width: 10em;height: 2.5em;font-size:10px;padding-bottom: 20px;} 
.btn-mobile:hover{color:#fff;background-color:#e76901;border-color:#fe821d;box-shadow:0 5px 15px rgba(0,0,0,.05),0 4px 10px rgba(255,161,0,0.5)} 
.btn-mobile.focus,.btn-mobile:focus{color:#fff;box-shadow:0 0 0 3px rgba(0,123,255,.15),0 3px 15px rgba(0,123,255,.2),0 2px 5px rgba(0,0,0,.1)} 
.btn-mobile.disabled,.btn-mobile:disabled{color:#fff;background-color:#ef7f1a;border-color:#007bff;box-shadow:none;cursor:not-allowed} 
.btn-mobile .h7 { vertical-align: middle; text-align: center; } 
.featurette-divider { margin: 5rem 0; } 
.featurette-heading { font-weight: 300; line-height: 1; letter-spacing: -.05rem; } 
.carousel-indicators .active { background-color: #fe821d; } 
.carousel-control .icon-prev, .carousel-control .icon-next, .carousel-control .fa-chevron-left, .carousel-control .fa-chevron-right { position: absolute; top: 50%; z-index: 5; display: inline-block; margin-top: -10px; } 
.carousel-control .icon-prev, .carousel-control .fa-chevron-left { left: 50%; margin-left: -10px; } 
.carousel-control .icon-next, .carousel-control .fa-chevron-right { right: 50%; margin-right: -10px; } 
.carousel-control .icon-prev, .carousel-control .icon-next { width: 20px; height: 20px; font-family: serif; line-height: 1; } 
} 
/* Small devices (landscape phones, 576px and up) */ 
@media (min-width: 576px) and (max-width: 767px) { 
.carousel { } 
.carousel-caption { bottom: 2rem; z-index: 10; } 
.carousel-item > img { top: 0; left: 0; margin-top: 25px; } 
.carousel-caption .hs-text { display: table-cell; vertical-align: middle; } 
.carousel-caption .hs-text h1 { color: #fff; font-weight: 400; font-size: 30px; margin-bottom: 20px; position: relative; top: 30px; opacity: 0; } 
.carousel-caption .hs-text h1 span { color: #fe821d; } 
.carousel-caption .hs-text p { color: #fff; font-size: 12px; margin-bottom: 10px; position: relative; top: 20px; opacity: 0; } 
.btn-mobile {background-color:#ef7f1a;border-color:#fe821d;box-shadow:none;color:#fff;width: 10em;height: 2.5em;font-size:10px;padding-bottom: 20px;} 
.btn-mobile:hover{color:#fff;background-color:#e76901;border-color:#fe821d;box-shadow:0 5px 15px rgba(0,0,0,.05),0 4px 10px rgba(255,161,0,0.5)} 
.btn-mobile.focus,.btn-mobile:focus{color:#fff;box-shadow:0 0 0 3px rgba(0,123,255,.15),0 3px 15px rgba(0,123,255,.2),0 2px 5px rgba(0,0,0,.1)} 
.btn-mobile.disabled,.btn-mobile:disabled{color:#fff;background-color:#ef7f1a;border-color:#007bff;box-shadow:none;cursor:not-allowed} 
.btn-mobile .h7 { vertical-align: middle; text-align: center; } 
.featurette-divider { margin: 5rem 0; } 
.featurette-heading { font-weight: 300; line-height: 1; letter-spacing: -.05rem; } 
.carousel-indicators .active { background-color: #fe821d; } 
.carousel-control .icon-prev, .carousel-control .icon-next, .carousel-control .fa-chevron-left, .carousel-control .fa-chevron-right { position: absolute; top: 50%; z-index: 5; display: inline-block; margin-top: -10px; } 
.carousel-control .icon-prev, .carousel-control .fa-chevron-left { left: 50%; margin-left: -10px; } 
.carousel-control .icon-next, .carousel-control .fa-chevron-right { right: 50%; margin-right: -10px; } 
.carousel-control .icon-prev, .carousel-control .icon-next { width: 20px; height: 20px; font-family: serif; line-height: 1; } 
} 
/* Extra small devices (portrait phones, less than 576px) */ 
@media (max-width: 575px) { 
.carousel { } 
.carousel-caption { bottom: 2rem; z-index: 10; } 
.carousel-item > img { top: 0; left: 0; margin-top: 25px; } 
.carousel-caption .hs-text { display: table-cell; vertical-align: middle; } 
.carousel-caption .hs-text h1 { color: #fff; font-weight: 400; font-size: 18px; margin-bottom: 20px; position: relative; top: 30px; opacity: 0; } 
.carousel-caption .hs-text h1 span { color: #fe821d; } 
.carousel-caption .hs-text p { color: #fff; font-size: 8px; margin-bottom: 10px; position: relative; top: 20px; opacity: 0; } 
.btn-mobile {background-color:#ef7f1a;border-color:#fe821d;box-shadow:none;color:#fff;width: 10em;height: 2.5em;font-size:8px;padding-bottom: 20px;} 
.btn-mobile:hover{color:#fff;background-color:#e76901;border-color:#fe821d;box-shadow:0 5px 15px rgba(0,0,0,.05),0 4px 10px rgba(255,161,0,0.5)} 
.btn-mobile.focus,.btn-mobile:focus{color:#fff;box-shadow:0 0 0 3px rgba(0,123,255,.15),0 3px 15px rgba(0,123,255,.2),0 2px 5px rgba(0,0,0,.1)} 
.btn-mobile.disabled,.btn-mobile:disabled{color:#fff;background-color:#ef7f1a;border-color:#007bff;box-shadow:none;cursor:not-allowed} 
.btn-mobile .h7 { vertical-align: middle; text-align: center; } 
.featurette-divider { margin: 5rem 0; } 
.featurette-heading { font-weight: 300; line-height: 1; letter-spacing: -.05rem; } 
.carousel-indicators .active { background-color: #fe821d; } 
.carousel-control .icon-prev, .carousel-control .icon-next, .carousel-control .fa-chevron-left, .carousel-control .fa-chevron-right { position: absolute; top: 50%; z-index: 5; display: inline-block; margin-top: -10px; } 
.carousel-control .icon-prev, .carousel-control .fa-chevron-left { left: 50%; margin-left: -10px; } 
.carousel-control .icon-next, .carousel-control .fa-chevron-right { right: 50%; margin-right: -10px; } 
.carousel-control .icon-prev, .carousel-control .icon-next { width: 20px; height: 20px; font-family: serif; line-height: 1; } 
}

---

Guten Tag,

Ich habe ein Ähnliches Problem und möchte die Bilder nur in einer Bestimmten grösse rollieren lassen an welcher stelle muss ich da denn den Hebel ansetzen ? 


VIelen lieben dank

---

odin: Guten Tag,

Ich habe ein Ähnliches Problem und möchte die Bilder nur in einer Bestimmten grösse rollieren lassen an welcher stelle muss ich da denn den Hebel ansetzen ? 


VIelen lieben dank

Normalerweise brauchst du nur alle Bilder in der gleichen Größe bearbeiten. z. B. 1920x400 dann ist die Höhe 400. 1920x600 ist Höhe 600