Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

WordPress

Darren Healy
seal-mask
.a{fill-rule:evenodd;}techdegree
Darren Healy
Front End Web Development Techdegree Student 23,565 Points
Posted by Darren Healy
.a{fill-rule:evenodd;}techdegree
Darren Healy
Front End Web Development Techdegree Student 23,565 Points

Bootstrap to WordPress Development: How to force carousel to be fixed height and width, then have image scale to fit.

Hello there,

I am following on from the content in this particular video: https://teamtreehouse.com/library/from-bootstrap-to-wordpress-theme/add-bootstrap-components-to-wordpress-theme/finishing-up-our-bootstrap-slideshow-carousel

I would like to know how to specify a certain height and width of the carousel, and then for any image to scale to fit that specified size.

Thanks in advance,

Darren

2 Answers

Bob McCarty
PLUS
Bob McCarty
Courses Plus Student 16,618 Points
Bob McCarty
Bob McCarty
Courses Plus Student 16,618 Points

Darren

bootstrap.min.css styles .carousel-inner to max-width 100%. You can change the slider size by styling .carousel-inner or .carousel or the containing element. In order to center the image, style ".carousel-inner > .item > img ". Be sure to set your overflow: hidden; and appropriately size your images .

.carouesl {
   max-height: your size;
   max-width: your width;
   overflow: hidden;
}

.carousel-inner > .item > img {
    margin: 0 auto;
}

This URL discusses the issue.

https://wordpress.org/support/topic/image-height-in-bootstrap

Darren Healy
seal-mask
.a{fill-rule:evenodd;}techdegree
Darren Healy
Front End Web Development Techdegree Student 23,565 Points
Darren Healy
.a{fill-rule:evenodd;}techdegree
Darren Healy
Front End Web Development Techdegree Student 23,565 Points

Thanks Bob, I will try this out.

Just wanted to clarify if this is a step I need to do:

"bootstrap.min.css styles .carousel-inner to max-width 100%."

Any chance you could talk me through the theory?

Some questions that spring to mind:

  • why max-height, max-width and not height, width? Is this to make it responsive?
  • what is the overflow for? And what does the hidden value do in this instance?
Bob McCarty
PLUS
Bob McCarty
Courses Plus Student 16,618 Points
Bob McCarty
Bob McCarty
Courses Plus Student 16,618 Points

Darren

Do your styling in style.css, follow Zac's lead on this. "bootstrap.css already styles .carousel-inner to max-width:100%. This means you set the size on the containing element like in this instance 'div class="col-md-9" '( already max-width: 75%; styled in bootstrap.css). The containing element then controls the image size. Use the img styling provided to center the image in the .carousel-inner container.

Setting max and min-width make the container responsive. Setting overflow: hidden; on the containing element prevents the scroll bar's appearance. You can use colored borders to help debug the styling. Did you read the accompanying thread?

https://wordpress.org/support/topic/image-height-in-bootstrap

Be sure to crop the images you want to use to the desired size. You can use the 'img srcset' attribute to specify the properly sized image. See the Treehouse class on responsive images "Image Delivery with Srcset and Sizes" taught by Nick.

Experiment with the styling using the multi colored border styles as a guide. This helps identify the contained and container elements.

Have fun with it, it takes practice.

Bob