Help with Tribute page project

Help with Tribute page project
0

#1

Hey guys. For the Tribute project I am running into some problems. (I’m using big images and trying to make them fit in their boxes) Looking for some advise.

Here is a link to my page. http://codepen.io/Ava92/full/dXQkXm

  • The big Tesla image at the top was to far down (because the image is too tall), so I used this CSS to move it up and hide the over flow. Out of all the ways I found to do it, this one worked the best. Is there a better way?
    position: relative;
    overflow: hidden;
    top: -150px;

  • I can’t cut off the bottom part of the big Tesla image so its pushing the rest of the content down as well. I tried adding bottom: -300px; but it didn’t work. Hopefully the advice I get for the first bullet will fix this.

  • At the bottom of the page where I have the 3 models of the car, all the images are different heights. I tried to set a max-width: 80%; so it would stay in the box and then I could mess around with the height to get them to all look the same but can’t get it to work (let me know if I should keep trying this way or if I should do something else). I also wanted to cut off and extra on the sides of the image so the car would taking up almost the whole picture but no luck.

I’ve been searching the webs, but I’m stuck… Any help would be awesome (so I don’t cry my self to sleep tonight :slight_smile: ) .

(Those weird borders were there to help me see what I was targeting when I was using the CSS selectors. I’ll take them off when I finish)


#2

I would cut and resize the images on Photoshop so you can use the custom size that you want.


#3

Do you see any other way around it?? I’m hoping to be able to do it with CSS


#4

There are ways to crop an image using CSS, but one is deprecated, and the other is experimental. You may be better off using an image editor and edit the images yourself.

Also, it’s better to use outline instead of border if you want to see the boundaries of your elements, since border adds to the total size of the element (and could thus disrupt your page’s layout).