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

JavaScript Using jQuery Plugins Using a jQuery Carousel Add a Carousel to a Page

Posted by ammarkhan
.a{fill-rule:evenodd;}techdegree
ammarkhan
Front End Web Development Techdegree Student 21,661 Points

Images not full width

I am using the plugin, i have set the images, but the images don't expand full width, e.g the carousel is half empty, how can i determine the size of images to use?

Charles Kenney
Charles Kenney
15,604 Points
Charles Kenney
Charles Kenney
15,604 Points

What about pix elated images if they are not good res.?

If it's not an SVG, I wouldn't mess with resolution. Just vertically and horizontally align in the parent div. You can do this via a flex box

#slide1 {
    display: flex;
    align-items: center;
    justify-content: center;
}

1 Answer

Charles Kenney
Charles Kenney
15,604 Points
Charles Kenney
Charles Kenney
15,604 Points

Part 1

You can control the size of your pictures in each slide with CSS. For example:

Here you have a slide div which holds your image, in HTML.

<div id="slide1">
  <img src="img.jpg" class="slide-img" />
</div>

Simply style by Class. Say you want the image to take up the entirety of the parent div (slide1). You'd just do this:

.slide-img {
  /* align with parent div */
  height: 100%;
  width: 100%;
}

Or you can do this programmatically with javascript...

  document.getElementByClassName('slide-img').style = "height: 100%; width: 100%;";

Part 2

What about pix elated images if they are not good res.?

If it's not an SVG, I wouldn't mess with resolution. Just vertically and horizontally align in the parent div. You can do this via a flex box

#slide1 {
    display: flex;
    align-items: center;
    justify-content: center;
}

Hope this helps, Charles

ammarkhan
.a{fill-rule:evenodd;}techdegree
ammarkhan
Front End Web Development Techdegree Student 21,661 Points

What about pix elated images if they are not good res.?