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
runa verse
409 Points[bootstrap] What if you have images of different sizes, but want to restrain them to the size of the image caps?
We're learning how to use cards (bootstrap) in this course (trying to create this section: http://treehouse-code-samples.s3.amazonaws.com/bootstrap-4/index.html#speakers). But, what would happen if you had images of different sizes, but want to constrain them to the same rectangular size that is responsive?
How would you 1) constrain them to be a certain rectangle size 2) make it responsive (I am guessing this would be the class img-fluid) 3) move the image within the. rectangle (in case the image doesn't fit properly--maybe it's a portrait image that you need to be landscape and you need to move it up by 200 px)
runa verse
409 Pointsruna verse
409 Pointslike for example, what if you had a portrait image, but wanted to constrain it as the same proportions of the landscape images and make sure it was responsive in the same way as those other images?