Resizing Image: Building a Tribute Page

Resizing Image: Building a Tribute Page
0.0 0

#1

Hey guys,

I have just got started working on a tribute page and I can’t get the image to be the right size. I want it to fit across the screen but to be about half of its current height. It is simply too large of an image at the moment. I have tried everything I could think of and researched but I still haven’t solved the problem. I could just reformat the whole structure but I really want to learn how to do this instead of just changing my original intent to something I could do far easier.

Could someone please advise? Here’s the link to my page:https://codepen.io/shyhaf/full/rdYRJo

Thanks!


#2

If you do that, your image will not be proportional anymore. It will be squished and the aspect ratio won’t be right.

What you can do is center the image, apply some background color.

The changes I did are:

<div id="heroshot">
  <img class="img img-responsive" src="https://images.ctfassets.net/16x2v9yfboht/73k9wyuikgUsuIeaY2Uekw/fdbe0915f29c5de3c2b63da2ae8c8159/Malala_Doc.jpg" alt="Malala smiling" >
  </div>
#heroshot {
  background-color: orange;
  text-align:center;
}

#3

Hey owel,

Ah, so, the only other option, in that case, would be to find a smaller image or otherwise just leave as is.

Thanks for your swift response!


#4

there are many ways to approach this. Depends on what you want…

Here’s another option… Malala’s picture is fixed, and stays in place as you scroll up the content.


#5

That’s really cool owel! I haven’t learned that option yet. I guess this is part of the point, you start seeing all of the different ways to do things. Thanks again!