I’m having some trouble with the images in one of my pages. They are in a carousel, but as the carousel slides to the next image, it is constantly changing sizes because the images are different sizes. I have tried to set them all to be the same size, but it doesn’t seem to matter, they are still different sizes. What do I need to do to make it so they are the same size so the carousel will remain consistent through each slide?
See the Pen aVpVXY by Ethan Forbes (@ethancodes) on CodePen.
I only see two images there: hot air balloons, which is 900 px by 450 px, and a tiger, which is 1600 px by 1200 px. So not only are they not the same size, they’re not even the same aspect ratio.
Yes I know, that’s what I’m saying. I tried to code in the size, but it doesn’t change anything. Those images are just place holders. Is there a way to modify images with code to make them all fit the same size? Or is this something that maybe could be fixed in photoshop? Or am I just out of luck and need all new images?
Well, as I said last time you asked:
So I would suggest that you simply use placeholder images of the size required.
I can’t see from your CodePen where you’ve tried to resize the images, but it looks as if the size is being set to width: 100%; height: auto; by the bootstrap CSS.
Edit: It may be that the size you’re using for .facilitiesImage (35em by 35em) is just too large. Setting a width of 400px there works for me, in that both images are reduced in width.
You can force the images to be the same height so that you don’t get a jump but you would be better off using images made to the correct aspect ratio for the task. You can squeeze and stretch images but generally a slideshow is about showing good images so you don’t want to make them look odd.
The css object-fit property could be used to make images the same size and also maintain aspect ratio but is not supported in IE.
You can use a fallback for IE like this:
.image-wrap{
width:100%;
position:relative;
overflow:hidden;
height:240px;/* set arbitrary height*/
}
#carousel .image-wrap img.facilitiesImage {
width: auto;
height:240px;
margin-left: auto;
margin-right: auto;
}
@supports (object-fit: cover){
#carousel .image-wrap img.facilitiesImage {
width: 60%;
height:240px;
margin-left: auto;
margin-right: auto;
object-fit:cover;
}
}
Note that I added an image-wrap parent div for the image so the overflow can be hidden.
#buttonDiv {
width: 5%;
margin-left: 15%;
}
#dropdown-menu {
color: black;
}
#carousel {
margin-top: 2%;
}
.paragraph1 {
margin-top: 5em;
position: center;
color: white;
z-index: -2;
font-size: 1em;
visibility: visible;
}
.subheader {
position: absolute;
right: 100em;
color: white;
z-index: -3;
visibility: visible;
}
.paragraph2 {
margin-top: 20px;
position: center;
color: white;
z-index: -4;
font-size: 1em;
visibility: visible;
}
#carousel {
text-align: center;
}
.facilityInfo {
text-align: center;
font-size: large;
}
.image-wrap{
width:100%;
position:relative;
overflow:hidden;
height:240px;/* set arbitrary height*/
}
#carousel .image-wrap img.facilitiesImage {
width: auto;
height:240px;
margin-left: auto;
margin-right: auto;
}
@supports (object-fit: cover){
#carousel .image-wrap img.facilitiesImage {
width: 60%;
height:240px;
margin-left: auto;
margin-right: auto;
object-fit:cover;
}
}
#layoutBody {
background: #353c3e;
color: white;
font-family: 'Oswald', sans-serif;
}
.navbar{
height: 135px;
}
.navbar-header a {
height: 120px;
width: auto;
padding-top: 3px;
}
#logo {
height: 120px;
width: auto;
}
#navposition {
width: 50%;
margin-top: 5.5%;
}
.individualbtnposition {
margin-right: 8%;
font-size: large;
}
.dropdown-submenu {
position: relative;
}
.dropdown-submenu > .dropdown-menu {
top: 0;
left: 100%;
margin-top: -6px;
margin-left: -1px;
-webkit-border-radius: 0 6px 6px 6px;
-moz-border-radius: 0 6px 6px 6px;
border-radius: 0 6px 6px 6px;
}
.dropdown-submenu > a:after {
display: block;
content: " ";
float: right;
width: 0;
height: 0;
border-color: transparent;
border-style: solid;
border-width: 5px 0 5px 5px;
border-left-color: #cccccc;
margin-top: 5px;
margin-right: -10px;
}
.dropdown-submenu:hover > a:after {
border-left-color: #555;
}
.dropdown-submenu.pull-left {
float: none;
}
.dropdown-submenu.pull-left > .dropdown-menu {
left: -100%;
margin-left: 10px;
-webkit-border-radius: 6px 0 6px 6px;
-moz-border-radius: 6px 0 6px 6px;
border-radius: 6px 0 6px 6px;
}
#search {
margin-top: 6%;
}
<nav class="navbar navbar-inverse">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar-collapse-1"> <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button>
<a class="navbar-brand"><img id="logo" src="/Images/SC2_MyLink_Logo.png" alt="SC2 Logo"/></a> </div>
<ul id="navposition" class="nav navbar-nav">
<li class="individualbtnposition"><a href="/">Home</a></li>
<li class="dropdown individualbtnposition"> <a href="#" class="dropdown-toggle" data-toggle="dropdown">Our Company<span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="/OurCompany">Our History</a></li>
<li><a href="/OurCompany/Facilities">Facilities</a></li>
</ul>
</li>
<li class="dropdown individualbtnposition"> <a href="#" class="dropdown-toggle" data-toggle="dropdown">Employee Services<span class="caret"></span></a>
<ul class="dropdown-menu">
<li class="dropdown dropdown-submenu"> <a href="#" class="dropdown-toggle" data-toggle="dropdown">Forms</a>
<ul class="dropdown-menu">
<li><a href="/FormsHandlers/HRForms">HR Forms</a></li>
<li><a href="/FormsHandlers/CorporateForms">Corporate Forms</a></li>
<li><a href="/FormsHandlers/EmployeeBenefitsForms">Employee Benefits</a></li>
<li><a href="/FormsHandlers/AccidentForms">Accident Forms</a></li>
<li><a href="/FormsHandlers/PayrollForms">Payroll Forms</a></li>
</ul>
</li>
<li><a href="#">Pay Stubs</a></li>
<li><a href="/FormsHandlers/FAQ">FAQ</a></li>
</ul>
</li>
<li class="dropdown individualbtnposition"> <a href="#" class="dropdown-toggle" data-toggle="dropdown">Support Services<span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="#">ISS Support</a></li>
<li><a href="#">Purchase Requests</a></li>
<li><a href="#">Maint. Support</a></li>
</ul>
</li>
</ul>
</div>
</nav>
<link type="text/css" href="/css/AboutUsStyleSheet.css" rel="stylesheet" />
<div id="main">
<h1>Facilities</h1>
</div>
<div id="carousel">
<div id="buttonDiv" class="dropdown">
<button class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown"> Select Facility <span class="caret"></span> </button>
<ul class="dropdown-menu">
<li><a href="#myCarousel" data-slide-to="0">SC2 Corporate</a></li>
<li><a href="#myCarousel" data-slide-to="1">SC2 Maintenance Facility</a></li>
<li><a href="#myCarousel" data-slide-to="2">SC2 Camp Facility</a></li>
<li><a href="#myCarousel" data-slide-to="3">SC2 Paint Facility EP</a></li>
<li><a href="#myCarousel" data-slide-to="4">SC2 East Peoria TT</a></li>
<li><a href="#myCarousel" data-slide-to="5">SC2 Airport Warehouse Bartonville</a></li>
<li><a href="#myCarousel" data-slide-to="6">SC2 Mossville</a></li>
<li><a href="#myCarousel" data-slide-to="7">SC2 Mossville DD</a></li>
<li><a href="#myCarousel" data-slide-to="8">NuAir Normal</a></li>
<li><a href="#myCarousel" data-slide-to="9">SC2 Delavan Facility</a></li>
<li><a href="#myCarousel" data-slide-to="10">SC2 Decatur DD</a></li>
<li><a href="#myCarousel" data-slide-to="11">SC2 Milan, IL</a></li>
<li><a href="#myCarousel" data-slide-to="12">SC2 Waco, TX</a></li>
</ul>
</div>
<div id="myCarousel" class="carousel" data-ride="carousel">
<!-- Indicators -->
<!-- Wrapper for slides -->
<div class="carousel-inner">
<div class="item active">
<div class="image-wrap"> <img class="facilitiesImage" src="http://www.planwallpaper.com/static/images/canberra_hero_image_JiMVvYU.jpg" alt="SC2 Corp"></div>
<div class="facilityInfo">
<p class="paragraph1"> SC2 Supply Chain Services opened the corporate office in 1996. Located in Peoria IL the facility houses the corporate offices as well as 160,000 sq ft warehouse. </p>
<div class="facilityInfo">
<h3 class="subheader">Contact:</h3>
<p class="paragraph2"> Address: 801 S. Jefferson Ave Peoria, IL 61605 ||
Phone: 309-677-5980 || <a href="http://maps.google.com/maps?q=801+SW+Jefferson+Ave,+Peoria,+IL+61605"> Click for Directions </a> </p>
</div>
</div>
</div>
<div class="item">
<div class="image-wrap"> <img class="facilitiesImage" src="http://www.planwallpaper.com/static/images/desktop-year-of-the-tiger-images-wallpaper.jpg" alt="SC2 Maintenance Facility"></div>
<div class="facilityInfo">
<p class="paragraph1"> The Maintenance Facility ran by Larry Hutchison is a Vital part of SC2. </p>
<div class="facilityInfo">
<h3 class="subheader">Contact:</h3>
<p class="paragraph2"> Address: 4000 SW. Adams St Peoria, IL 61605 ||
Phone: 309-637-5051 || <a href="http://maps.google.com/maps?q=4000+SW+Adams+St,+Peoria,+IL+61605"> Click for Directions </a> </p>
</div>
</div>
</div>
<div class="item">
<div class="image-wrap"> <img class="facilitiesImage" src="https://loremflickr.com/450/600" alt="SC2 Camp Facility"></div>
<div class="facilityInfo">
<p class="paragraph1"> SC2 expanded to East Peoria in 2000 and establishedmtheir dealer returns for Catepillar in a 320,000 sq ft warehouse. The building is ran by Chris Hulett and Tabatha Way. </p>
<div class="facilityInfo">
<h3 class="subheader">Contact:</h3>
<p class="paragraph2"> Address: 600 Camp St. East Peoria, IL 61611 || Phone: 309-694-6000 || <a href="http://maps.google.com/maps?q=600+Camp+St,East+Peoria,+IL+61611"> Click for Directions </a> </p>
</div>
</div>
</div>
<div class="item">
<div class="image-wrap"> <img class="facilitiesImage" src="https://loremflickr.com/450/850" alt="SC2 Paint Facility EP"></div>
<div class="facilityInfo">
<p class="paragraph1"> SC2 expanded to East Peoria in 2000 and established their paint facility. The building is ran by Joshua Clark </p>
<div class="facilityInfo">
<h3 class="subheader">Contact:</h3>
<p class="paragraph2"> Address: 200 Carver Ln. East Peoria, IL 61611 || Phone: 309-699-3984 || <a href="http://maps.google.com/maps?q=200+Carver+Ln,East+Peoria,+IL+61611"> Click for Directions </a> </p>
</div>
</div>
</div>
<div class="item">
<div class="image-wrap"> <img class="facilitiesImage" src="https://loremflickr.com/350/550" alt="SC2 East Peoria TT"></div>
<div class="facilityInfo">
<p class="paragraph1"> SC2 East Peoria TTT was established in 2017 as an on-site service located inside of a CAT facility. CAT utilizes SC2's expertise in Logistics Planning among several other services. </p>
<div class="facilityInfo">
<h3 class="subheader">Contact:</h3>
<p class="paragraph2"> Address: Tractor Dr. East Peoria, IL 61611 || Phone: || <a href="http://maps.google.com/maps?q=Tractor+Dr,East+Peoria,+IL+61611"> Click for Directions </a> </p>
</div>
</div>
</div>
<div class="item">
<div class="image-wrap"> <img class="facilitiesImage" src="https://loremflickr.com/550/150" alt="SC2 Airport Warehouse Bartonville"></div>
<div class="facilityInfo">
<p class="paragraph1"> Established 2010 the Bartonville facility(Airport) sits inside of a 400,000 sq ft building. Airport houses commercial packaging ran by Misty Hallor. </p>
<div class="facilityInfo">
<h3 class="subheader">Contact:</h3>
<p class="paragraph2"> Address: 6409 W Smithville Rd. Bartonville, IL 61607 || Phone: 309-633-9120 || <a href="http://maps.google.com/maps?q=6409+W+Smithville+Rd,Bartonville,+IL+61604"> Click for Directions </a> </p>
</div>
</div>
</div>
<div class="item">
<div class="image-wrap"> <img class="facilitiesImage" src="https://loremflickr.com/50/150" alt="SC2 Mossville"></div>
<div class="facilityInfo">
<p class="paragraph1"> Established 2007 the Mossville facility is a 500,000 sq ft building. Contract Packaging and Cross-Dock Services are ran in the facility headed by Randy Rarick. </p>
<div class="facilityInfo">
<h3 class="subheader">Contact:</h3>
<p class="paragraph2"> Address: 2314 Wilkins Dr. Mossville, IL 61523 || Phone: 309-633-9120 || <a href="http://maps.google.com/maps?q=2314+Wilkins+Dr,Mossville,+IL+61523"> Click for Directions </a> </p>
</div>
</div>
</div>
<div class="item">
<div class="image-wrap"> <img class="facilitiesImage" src="https://loremflickr.com/450/150" alt="SC2 Mossville DD"></div>
<div class="facilityInfo">
<p class="paragraph1"> Housed inside of a CAT facility Mossville DD was established in 2014. Providing Storing, Receiving, Pick and Ship services on site for CAT. </p>
<div class="facilityInfo">
<h3 class="subheader">Contact:</h3>
<p class="paragraph2"> Address: 14009 Old Galena Rd. Mossville, IL 61522 || Phone: 309-633-9120 || <a href="http://maps.google.com/maps?q=14009+Old+Galena+Rd,Mossville,+IL+61522"> Click for Directions </a> </p>
</div>
</div>
</div>
<div class="item">
<div class="image-wrap"> <img class="facilitiesImage" src="https://loremflickr.com/650/350" alt="NuAir Normal"></div>
<div class="facilityInfo">
<p class="paragraph1"> Established in 1991 the 105,000 sq ft facility in Normal IL is utilized for fabrication work and filtration. The facility is ran by Jami Harding. </p>
<div class="facilityInfo">
<h3 class="subheader">Contact:</h3>
<p class="paragraph2"> Address: 2219 W.College Ave. Normal, IL 61761 || Phone: 309-888-4331 || <a href="http://maps.google.com/maps?q=2219+W+College+Ave,Normal,+IL+61761"> Click for Directions </a> </p>
</div>
</div>
</div>
<div class="item">
<div class="image-wrap"> <img class="facilitiesImage" src="https://loremflickr.com/850/550" alt="SC2 Delavan Facility"></div>
<div class="facilityInfo">
<p class="paragraph1"> Established in 1997 the Delavan facility 1.3 Million sq ft is used for VMI Warehousing. </p>
<div class="facilityInfo">
<h3 class="subheader">Contact:</h3>
<p class="paragraph2"> Address: 1980 Catepillar Rd. Delavan, IL 61734 || Phone: 309-888-4331 || <a href="http://maps.google.com/maps?q=1980+Catepillar+Rd,Delavan,+IL+61734"> Click for Directions </a> </p>
</div>
</div>
</div>
<div class="item">
<div class="image-wrap"> <img class="facilitiesImage" src="https://loremflickr.com/250/350" alt="SC2 Decatur DD"></div>
<div class="facilityInfo">
<p class="paragraph1"> Established in 2002 as an on-site service to CAT. SC2 provides Facility Maintenance, Paint Booth Cleaning, Line Striping, Lighting, and Material handling. </p>
<div class="facilityInfo">
<h3 class="subheader">Contact:</h3>
<p class="paragraph2"> Address: 2701 Pershing Rd. Decatur, IL 62525 || Phone: 309-677-5980 || <a href="http://maps.google.com/maps?q=2701+Pershing+Rd,+Decatur,+IL+62525"> Click for Directions </a> </p>
</div>
</div>
</div>
<div class="item">
<div class="image-wrap"> <img class="facilitiesImage" src="https://loremflickr.com/850/650" alt="SC2 Milan, IL"></div>
<div class="facilityInfo">
<p class="paragraph1"> Established in 2002 as an on-site service to CAT. SC2 provides Facility Maintenance, Paint Booth Cleaning, Line Striping, Lighting, and Material handling. </p>
<div class="facilityInfo">
<h3 class="subheader">Contact:</h3>
<p class="paragraph2"> Address: 801 E. 1st St. Suite 500 Door #31A Milan, IL 61264|| Phone: 309-677-5980 || <a href="http://maps.google.com/maps?q=801+E+1st+St+Milan,+IL+61264"> Click for Directions </a> </p>
</div>
</div>
</div>
<div class="item">
<div class="image-wrap"> <img class="facilitiesImage" src="https://loremflickr.com/2450/1450" alt="SC2 Waco, TX"></div>
<div class="facilityInfo">
<p class="paragraph1"> Established in 2008 in a 100,000 sq ft warehouse. SC2 uses this facility as a warehouse and logistics center ran by Emily Shaw. </p>
<div class="facilityInfo">
<h3 class="subheader">Contact:</h3>
<p class="paragraph2"> Address: 301 Schroeder Dr. Waco, TX 76710 || Phone: 254-756-2622 || <a href="http://maps.google.com/maps?q=301+Schroeder+Dr,+Waco,+TX+76710"> Click for Directions </a> </p>
</div>
</div>
</div>
</div>
<!-- Left and right controls -->
<a class="left carousel-control" href="#myCarousel" data-slide="prev"> <span class="glyphicon glyphicon-chevron-left"></span> <span class="sr-only">Previous</span> </a> <a class="right carousel-control" href="#myCarousel" data-slide="next"> <span class="glyphicon glyphicon-chevron-right"></span> <span class="sr-only">Next</span> </a> </div>
</div>
Slideshows are best used with a fixed height and generally not best for text content unless its tightly controlled otherwise you get a jump of the page content if the slideshow height is auto or text wraps etc.
This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.