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

CSS

Mladen Stojanovic
Mladen Stojanovic
15,444 Points
Posted by Mladen Stojanovic
Mladen Stojanovic
15,444 Points

Fitting different sized images into the same parent areas

When I wanted to personalize my website from the course "How to make a website" I found out that when I wanted to insert my own images into the same code we used in the exercise, I had a visual "issue", some of the pictures were different size, and they took different amount of space on my page (http://prntscr.com/a9k2k8) which doesn't look nice for me :)

Question:

How can I make all the images take up the same amount of size, so they are aligned bottom and top, and still keep the responsive design (I guess i can fix the height of the element in px, but that won't keep it responsive? ) ? Googling, I found the "object-fit" code, but I tried it on my main.css and nothing happened, Workspaces highlight it in red like there is something wrong with it.

Thanks in advance.

Mike West
Mike West
9,163 Points

Can you post your code?

Mladen Stojanovic
Mladen Stojanovic
15,444 Points
Mladen Stojanovic
Mladen Stojanovic
15,444 Points

It is exactly the same as the one used in the previous mentioned course.

          /***********************************
GENERAL
************************************/

body {
  font-family: 'Open Sans', sans-serif;
}

#wrapper {
  max-width: 940px;
  margin: 0 auto;
  padding: 0 5%;
}

a {
  text-decoration: none;
}

img {
  max-width: 100%;


}

h3 {
  margin: 0 0 1em 0;
}




/***********************************
HEADING
************************************/

header{
  float:left;
  margin:0 0 30px 0;
  padding: 5px 0 0 0;
  width: 100%;
}

#logo {
  text-align: center;
  margin: 0;
}

h1 {
  font-family: 'Changa One', sans-serif;
  margin: 15px 0;
  font-size: 1.75em;
  font-weight: normal;
  line-height: 0.8em;
}

h2 {
  font-size: 0.75em;
  margin: -5px 0 0;
  font-weight: normal;

}


/***********************************
NAVIGATION
************************************/


nav {
  text-align:center;
  padding:10px 0;
  margin: 20px 0 0;
}

nav ul {
  list-style: none;
  margin: 0 10px;
  padding: 0;
 }

nav li {
  display:inline-block;
}

nav a {
  font-weight: 800;
  padding: 15px 10px;
}


/***********************************
Footer
************************************/


footer {
  font-size:0.75em;
  text-align:center;
  padding-top: 50px;
  color: #ccc;
  clear:both;
}

.social-icon {
  width: 20px;
  height: 20px;
  margin: 0 5px;
}



/***********************************
PAGE: PORTFOLIO
************************************/

#gallery {
  margin: 0;
  padding: 0;
  list-style: none;

}

#gallery li {
  float: left;
  width: 45%;
  margin: 2.5%;
  background-color: #f5f5f5;
  color: #bdc3c7;

}

#gallery li a img {

  border: 3px black solid;

}




#gallery li a p {

  margin: 0;
  padding: 5%;
  font-size: 0.75em;
  color: #bdc3c7;
  text-align: center;
}

/***********************************
PAGE: ABOUT
************************************/

.profile-photo {
  display: block;
  max-width: 150px;
  margin: 0 auto 30px;
  border-radius: 100%;
}




/***********************************
PAGE: CONTACT
************************************/

.contact-info {
  list-style: none;
  padding: 0;
  margin: 0;
  font-size: 0.9em;
}

.contact-info a {
  display:block;
  min-height:20px;
  background-repeat: no-repeat;
  background-size: 20px 20px;
  padding: 0 0 0 30px;
  margin: 0 0 10px;
}

.contact-info li.phone a {
 background-image: url('../img/phone.png'); 
}

.contact-info li.mail a {
 background-image: url('../img/mail.png'); 
}

.contact-info li.facebook a {
 background-image: url('../img/facebook.png'); 
}


/***********************************
COLORS
************************************/

/* site body */

body {
  background-color: #fff;
  color: #999;
}

/* green header */

header {
  background: #6ab47b;
  border-color: #599a68;
}

/* nav background on mobile devices */

nav {
  background: #599a68;
} 

/* logo text */
h1, h2 {
  color: #fff;
}

/* links */
a {
  color: #6ab47b;
}



/* nav link */
nav a, nav a:visited {
  color: #fff;
}

/* selected nav link */
nav a.selected, nav a:hover {
  color: #32673f;
}

          ```

3 Answers

Iain Simmons
Iain Simmons
Treehouse Moderator 32,305 Points

The only solution I can think of is to make use of overflow: hidden, which requires wrapping images in a parent container. You'd then probably need to make the parent position: relative and the images position: absolute to get them positioned/cropped where you want. This will probably require fixed dimensions (both width and height) to work though...

Here's a good StackOverflow question on this: how to center and Crop an image to square with CSS

Or make everything a background image instead, but semantically, that's not a good idea.

Mike West
Mike West
9,163 Points
Mike West
Mike West
9,163 Points

Thanks. Firstly are all the source image files the same size in pixels? I wouldn't use the html/css to modify the photos, you can end up with some odd rendering etc. Make sure that the photos are all the same size and then upload. Once you've done so you can still make the page responsive by setting %-based widths etc. Hope this helps

Mladen Stojanovic
Mladen Stojanovic
15,444 Points
Mladen Stojanovic
Mladen Stojanovic
15,444 Points

That's what i mentioned in the first post, the images are not the same size. Is the only solution for me to make them the same size before uploading, or is there a way for them to fit and resize in to an element with a predefined size?

makishamaier
makishamaier
3,070 Points
makishamaier
makishamaier
3,070 Points

I think you're best off re-sizing the images before implementing them on your page. Especially since the original images do not seem to have the same proportions. That is, you could change the height of that second photo using css, but it would then seem too narrow/thin compared to the others. There are good reasons for that, since most people do not want to accidentally distort their images.

A simple crop seems the easiest solution.

Mladen Stojanovic
Mladen Stojanovic
15,444 Points
Mladen Stojanovic
Mladen Stojanovic
15,444 Points

Makes sense, got it! Thanks a lot!