Highlighted

bootstrap carousel - how to size images?

Explorer ,
Nov 19, 2017

Copy link to clipboard

Copied

I am setting up my first Bootstrap carousel (slideshow) and am having trouble setting the size of the images, particularly the verticals (where the height is greater than the width). How do I style the images so that they are all contained the same size window? What element do I style - center-block, carousel-inner, item, or what?

Thanks

Kevin from Cambridge

KevinB9  wrote

My business is photography. I am showing my original photography. Maybe I should have explained. I am presenting landscapes, portraits, panoramas and pictures of church steeples. If they are all "cropped the same" I will end up with some awfully ill-framed photographs. In my mind photographs are not just fodder for websites.

As I suspected, you wouldn't use the Bootstrap carosuel for this but an image gallery solution, maybe thumbnails which then open a modal overlay window which is isolated on its own so the difference in image size is not a problem...

If you can afford to purchanse an extension maybe look at something like the below. You can see there is an example which uses different sized image in a thumbnail gallery which open a modal window when clicked on...

Magic Box Demo

Views

27.2K

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more

bootstrap carousel - how to size images?

Explorer ,
Nov 19, 2017

Copy link to clipboard

Copied

I am setting up my first Bootstrap carousel (slideshow) and am having trouble setting the size of the images, particularly the verticals (where the height is greater than the width). How do I style the images so that they are all contained the same size window? What element do I style - center-block, carousel-inner, item, or what?

Thanks

Kevin from Cambridge

KevinB9  wrote

My business is photography. I am showing my original photography. Maybe I should have explained. I am presenting landscapes, portraits, panoramas and pictures of church steeples. If they are all "cropped the same" I will end up with some awfully ill-framed photographs. In my mind photographs are not just fodder for websites.

As I suspected, you wouldn't use the Bootstrap carosuel for this but an image gallery solution, maybe thumbnails which then open a modal overlay window which is isolated on its own so the difference in image size is not a problem...

If you can afford to purchanse an extension maybe look at something like the below. You can see there is an example which uses different sized image in a thumbnail gallery which open a modal window when clicked on...

Magic Box Demo

Views

27.2K

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Nov 19, 2017 0
LEGEND ,
Nov 19, 2017

Copy link to clipboard

Copied

KevinB9  wrote

I am setting up my first Bootstrap carousel (slideshow) and am having trouble setting the size of the images, particularly the verticals (where the height is greater than the width). How do I style the images so that they are all contained the same size window? What element do I style - center-block, carousel-inner, item, or what?

Thanks

Kevin from Cambridge

It's best to crop your images so they are all same size i.e. have the same width and height. If you dont do that you will end up with a rather 'unsightly' carousel.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Nov 19, 2017 0
Explorer ,
Nov 19, 2017

Copy link to clipboard

Copied

Oh, dear - I hope that's not true. Yes, my carousel is now quite unsightly with the vertical images blowing out through the bottom of the window.

A vertical image will always have a different aspect ratio than a horizontal. They can't be cropped the same!

Can't I try to give the verticals a separate class and then style the "height" property somehow?

Help!

K

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Nov 19, 2017 1
LEGEND ,
Nov 19, 2017

Copy link to clipboard

Copied

KevinB9  wrote

Oh, dear - I hope that's not true. Yes, my carousel is now quite unsightly with the vertical images blowing out through the bottom of the window.

A vertical image will always have a different aspect ratio than a horizontal. They can't be cropped the same!

Can't I try to give the verticals a separate class and then style the "height" property somehow?

Help!

K

Ok, well when I build image galleries I tend to like to keep all the images the same size - I don't like images which are all different sizes, unless they are in a modal/overlay window which doesn't affect the rest of the page layout.

You could try to set a specific height for the images, an auto width and a max-height:

#myCarousel img {

width: auto;

height: 225px;

max-height: 225px;

}

Bootsrap should accommodate varying heights of images unless there is a specific height been set somewhere for the carousel.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Nov 19, 2017 1
Explorer ,
Nov 19, 2017

Copy link to clipboard

Copied

OK. I am going to answer my own question here, although this is really not such a great solution.

What I could do is change the canvas size in Photoshop and create a new horizontal format. The vertical image would be in the middle with blank space on the sides.

I haven't tried this yet but it should work.

This will create a lot of work for me. I wish there was a way to style the verticals differently in CSS.

Kevin

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Nov 19, 2017 0
Explorer ,
Nov 19, 2017

Copy link to clipboard

Copied

You could try to set a specific height for the images, an auto width and a max-height:

#myCarousel img {

width: auto;

height: 225px;

max-height: 225px;

}

Bootsrap should accommodate varying heights of images unless there is a specific height been set somewhere for the carousel.

OK. Thanks for the suggestion. I will try it. "Height" for me has always been a forbidden city in Dreamweaver. It seems that the height always expands automatically to accommodate content. That's the problem with the carousel - image height bouncing up and down.

K

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Nov 19, 2017 1
osgood_ LATEST
LEGEND ,
Nov 20, 2017

Copy link to clipboard

Copied

KevinB9  wrote

OK. Thanks for the suggestion. I will try it. "Height" for me has always been a forbidden city in Dreamweaver. It seems that the height always expands automatically to accommodate content. That's the problem with the carousel - image height bouncing up and down.

K

It's ok to set a height for the images in this situation, the problem with height arises if you try and restrict content to a specifically set height container. You're not setting the height of the container that the images will appear in so the container will just adjust to the height of the images, which are all set at a max-height, the width of the image will vary, as it's set to auto....

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Nov 20, 2017 1
Explorer ,
Nov 19, 2017

Copy link to clipboard

Copied

Thank you for all suggestions. I know they were made in good faith. Thank you, thank you.

To the poster who said that "all photos should be cropped the same" - that's like saying that all restaurants should serve chicken wings as an appetizer whether you like it or not . . .

My business is photography. I am showing my original photography. Maybe I should have explained. I am presenting landscapes, portraits, panoramas and pictures of church steeples. If they are all "cropped the same" I will end up with some awfully ill-framed photographs. In my mind photographs are not just fodder for websites.

to be continued . . .

Kevin

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Nov 19, 2017 1
Adobe Community Professional ,
Nov 19, 2017

Copy link to clipboard

Copied

Have you looked at Adobe Portfolio -- free with your creative cloud membership?  It's a very popular  venue for photographers.   The Photo Grid is well suited for displaying images in different aspect ratios.  See below for examples of what you can do with no coding skills.

  1. https://help.myportfolio.com/hc/en-us/articles/115003634308-What-is-a-Photo-Grid-and-how-do-I-create...
  2. https://medium.com/behance-blog/introducing-photo-grids-on-behance-adobe-portfolio-4c93cd800ad4
Nancy O'Shea, ACP
Alt-Web Design & Publishing

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Nov 19, 2017 1
Explorer ,
Nov 19, 2017

Copy link to clipboard

Copied

Nancy - thank you. I will check out these resources.

Kevin

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Nov 19, 2017 0
LEGEND ,
Nov 20, 2017

Copy link to clipboard

Copied

KevinB9  wrote

My business is photography. I am showing my original photography. Maybe I should have explained. I am presenting landscapes, portraits, panoramas and pictures of church steeples. If they are all "cropped the same" I will end up with some awfully ill-framed photographs. In my mind photographs are not just fodder for websites.

As I suspected, you wouldn't use the Bootstrap carosuel for this but an image gallery solution, maybe thumbnails which then open a modal overlay window which is isolated on its own so the difference in image size is not a problem...

If you can afford to purchanse an extension maybe look at something like the below. You can see there is an example which uses different sized image in a thumbnail gallery which open a modal window when clicked on...

Magic Box Demo

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Nov 20, 2017 1
Adobe Community Professional ,
Nov 19, 2017

Copy link to clipboard

Copied

Use Photoshop to create banners of required height & width to fit your carousel.  Crop, resize and arrange individual images on your banner canvas.  See link below for details.

Re: how do I combine pictures in a banner?

Nancy O'Shea, ACP
Alt-Web Design & Publishing

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Nov 19, 2017 0
LEGEND ,
Nov 19, 2017

Copy link to clipboard

Copied

I think what the OP is trying to do is create a situation where the carousel doesn't bounce up and down when the images are different heights and the only way to do that is to create extra transparent space around the shorter ones or use some kind of sympathetic javascript which smoothly allows for the difference in height.

I think this situation only works for an image gallery on a seperate page, not on a page which contains other elements, text etc. I don't particulary want all the text moving up and down as one traverses through the different sized images. I'm not sure how nice a lot of space around an images is going to be either, happy days!

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Nov 19, 2017 0
Adobe Community Professional ,
Nov 19, 2017

Copy link to clipboard

Copied

It stands to reason that if your Caroursel is 1100px by 150px, your images need to be the same size.  Having same sized images is important.   That's why I suggest making collages with mulitple images to fit the intended carousel size.

Nancy O'Shea, ACP
Alt-Web Design & Publishing

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Nov 19, 2017 0
Adobe Community Professional ,
Nov 19, 2017

Copy link to clipboard

Copied

Maybe a Carousel is the wrong course of action here. 

A thumbnail gallery that supports both portrait and landscape images might be a better fit (pun intended).

Or perhaps a  mosaic or Photo Grid layout.

Bootstrap Image Gallery with Responsive Grid

Nancy O'Shea, ACP
Alt-Web Design & Publishing

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Nov 19, 2017 1