Coding a profile picture

#1

Hi freecodecampers.

I’m currently on the Portfolio challenge, which is one of the firsts and barely have I started that I’m already encountering a road-block.

I read documentation on bootstrap and CSS, but I haven’t exactly got what I am looking for. Now, my searches don’t seem to be bringing up promising solutions. And while I cannot be sure, I have the feeling the solution to my problem will be rather simple. I’m probably just missing a little something, somewhere.

So, I have to structure my portfolio challenge on the one freecodecamp made here.

This is how I structured my first box:

<div class="container">
	  
	  <!-- Presentation -->
	  
	  <div class="row" style="max-height: 300px; background-color: #FAFAFA;">
		<div class="col-8">
		  <h3>blablabla</h3>
		  <hr>
		  <h2>blablabla</h2>
		</div>
		<div class="col-4">
		  <div class="portrait">
		    <img src="./batmanandrobin.jpg" alt="batmanandrobin" class="img-fluid">
		  </div>
		</div>
	  </div>
	  
	  <!-- Portfolio showcase-->
	  <!-- Contact me-->
	  
    </div>

The problem lies with the image. It keeps overflowing vertically into the body. It doesn’t stay in the col-4 column. I tried putting a container box titled portrait, but it doesn’t change a single thing.

Not sure how to move forward on this one, the image is not resizing properly to occupy -only- the space allotted to that pic. I also need to make it round. round-border and img-fluid Bootstrap 4’s classes don’t seem to be giving me the result I’m looking for.

#2

How so? Are you perhaps using a different version of boostrap? I believe that it’s img-responsive in Bootstrap3.

ETA: If you have a codepen, please include a link to it.

#3

This is the (head) portion of my code, linking to Bootstrap 4.

<!doctype html>
<html lang="en">
  <head>
    <title>My Portfolio Page</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
    <link rel="stylesheet" href="./myportfolio.css"> 
  </head>

Apparently, the img.responsive class became img-fluid in Bootstrap 4, but they’re supposed to act the same. That’s an information provided first on Stack Overflow, but then I went on Bootstrap’s 4 documentation, in the image section, and it confirmed it.

Here’s a link to my CodePen, although I absolutely dislike that tool. For this purpose I can see its relevance.

#4

It looks like the responsive sizing is width based.

2 Likes
#5

In codepen, you can go to settings -> css and click the little eye symbol next to bootstrap to see the code (for bootstrap) in a new tab. Then search for img-fluid and you’ll see the rules it’s applying.

.img-fluid {
  max-width: 100%;
  height: auto;
}

This SO answer should help, I think: https://stackoverflow.com/questions/19708979/constraining-image-height-with-bootstrap-responsive-image

2 Likes
#6

Ok, I found the answer, or at least part of it, in the second link the first responder gave. (Here)

Here’s how the image part of my code looks like now:

<div class="col-4">
  <img src="./batmanandrobin.jpg" alt="batmanandrobin" class="img-fluid" style="max-width: 100%; max-height: 100%; border-radius: 50%;">
</div>

This solves the problem of having the image fit the container box. I’m wondering though, I thought making the image’s shape a circle was as simple as applying the style border-radius: 50%;, but this results in an oval instead of a round circle. Would you happen to know what’s causing that? I even tried using Bootstrap’s .rounded-circle class, instead of the border-radius: 50%; style, but it gives the same result. Is it because of the images specs? Or the height of my container box, which is defined?

#7

Border radius 50% will turn a square image into a circle or a rectangular image into an oval. Think of taking a piece of paper. You make a mark halfway along every side. Now draw a curve on each corner connecting those marks. The length and width are going to stay the same. Only the corners will change.

This is why when you upload a profile picture to something like facebook, it makes you select a square region before it creates the circle.

2 Likes
#8

Makes a lot of sense. I’ll resize my picture then! Thank you so much Ariel.

#9

Thank you, Richard. This is greatly appreciated.