Unresponsive image scaling

HTML-CSS
#1

Background:

The css starts on line 303. Each card/ box is 5 HTML lines starting on line 129.

.project-card (314) is the box that has a background image.

.project-wrapper (304) contains all the boxes

.project-desc (326) is the pop up animation for each card:

The images for the cards are background images CSS line 365.

image
image1920×1040 543 KB

Issue:

The cards don’t responsively scale if i change the CSS code of the card:

  width: 500px;
  height: 281px;
  max-width: 500px;
  max-height:281px;

To:

  width: 100vw;
  height: auto;
  max-width: 500px;
  max-height: 281px;

I am expecting the height to equally scale up because the image is a 16:9 aspect ratio. The original image itself is also 1920 x 1080px shrunk down to this size.

So why does it come out like:

image
image1920×1040 378 KB

It is the exact same size but just resizes responsively on smaller screens. The height should automatically change but it doesn’t.

#2

I am not 100% sure but I don’t believe that background is going to work quite like an img. I think the best you can do is stretch or crop your background to the container.

If the background is not going to resize to your div maybe try sizing the div to the background. Unless someone chimes in with something smarter consider setting the height to 56vw. (9:16 approx 56:100)

  width: 100vw;
  height: 56vw;
  max-width: 500px;
  max-height: 281px;
#3

So i tried changing it from a div to a image:

<img class="project-card placeholder">
      <div class="project-desc">
        <p> HermitCraft Tag</p>
        <a class="view-project-button"> View this Project </a>
      </div>
    </img>

Instead of background images i changed it to src’s.

.placeholder {content:url('https://via.placeholder.com/150');}
.inf {content:url('https://i.ibb.co/MZqspMW/2018-12-02-3.png');}
.telex {content:url('https://i.ibb.co/MSqL7Qv/2018-12-02-4.png');}
.survey {content:url('https://i.ibb.co/Bzw70yJ/2018-12-02-5.png');}

The images do show up but I have issues:

  1. There is no padding on any of the of the custom images (.inf, .telex, etc).
  2. The pop-up animation for hovering over does not work anymore
  3. The images refuse to work with .project-wrapper properties, not in a row at all and does not respond to the display: flex;
  4. There is a massive margin between all of them now.

@RandellDawson

Help with this?

Here was the original before i changed anything: https://codepen.io/Mike-was-here123/pen/MzdgWM?editors=1000

Here is after i changed it to the image i mentioned above: https://codepen.io/Mike-was-here123/pen/zMWrwx

#4

I believe your first problem, where height wouldn’t change, was due to your use of background image. I think auto goes by content size, and since backgrounds aren’t content they aren’t factored into it. If you add an img tag inside .project-card html, or set it using content, then height will resize as expected. Also, I think you should leave your .project-card tag as a div since it holds other stuff as well.

There is no padding on any of the of the custom images

I was able to give project-cards some padding. You might have a situation where image overflows the container. After you add the image, you should make a rule for it to ensure it stays inside the card:

.project-card img {
width: 100%;
height: auto;
}

The pop-up animation for hovering over does not work anymore

Looks like this has to do with how you set content on lines 365-368. I never used this property so don’t know, but after I commented these out and pasted an img element inside the first project-card, I could see the hover animation again. The black div gets pushed down due to presence of an img, but that can be fixed by giving it position: absolute and 0 for top and left.

.The images refuse to work with .project-wrapper properties, not in a row at all and does not respond to the display: flex;

This likely has to do with aforementioned overflow issue.

There is a massive margin between all of them now.

I think that’s because you have margin: 2%; on your project-card. That’s 2% of parent element’s width.

chrome_2018-12-04_14-03-24
chrome_2018-12-04_14-03-243440×1392 676 KB

1 Like
#5

So what would the final code look like in order for it to work as described?

#6

Here are the relevant bits.

.project-card {
  border: 1px solid black;
  margin: 1vmin;
  padding: 0.5vmin;
  width: 21vw;
  height: auto;
  box-shadow: 2px 2px 5px black;
  transition: 0.7s ease-in-out;
  transform: scale(1);
}

.project-card img {
  width: 100%;
  height: auto;
}

.project-desc {
  position: absolute;
  top: 0;
  left: 0;
  visibility:hidden;
  padding: 5%;
  background-color: black;
  color: white;
  opacity: 0.05;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  transition: 1s ease-in-out;
}

Additionally, I removed lines 365-368 in your CSS, and added img element to every card in the html. I’d also want to add media queries to increase .project-card width on smaller screens so they take up like 45vw and 90vw, for example. As a side note, have you thought about using grid here? I think it would be easier and you wouldn’t even need media queries. Check this out: https://codepen.io/SaraSoueidan/pen/JrLdBQ

#7

What would the HTML code look like?

#8

Same as yours (the before version) except that every .project-card div has an additional image element inside, as the first element.

1 Like
#9

Thank you so much.

It works out great :smiley: