1

I have created a small mockup of the issue here: https://codepen.io/rctneil/pen/PoBgZEe?editors=1100

What I wish to achieve is effectively to remove the space above and below the logo inside the dotted red outline.

I want to keep the logo in exactly the same place as it is (horizontally centered and vertically centered on the photo's bottom edge), but remove the space above and below. This should reduce the overall height of the card.

I do not know the dimensions nor aspect ratio of the logos ahead of time.

Any ideas?

* {
  box-sizing: border-box;
}

p {
  margin: 0;
}

html {
  height: 100%;
  display: grid;
  place-items: center;
}

.card {
  position: relative;
  width: 200px;
  border: 2px solid black;
}

.photo {
  display: block;
  width: 100%;
  aspect-ratio: 1/1;
  object-fit: cover;
}

.logo {
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  margin-top: -25%;
  padding: 25%;
  min-width: 100%;
  pointer-events: none;
  outline: 2px dotted red;
}

.logo img {
    position: absolute;
    display: block;
    max-width: 50%;
    max-height: 75%;
    margin-top: 0;
    padding: 0.2rem;
    border-radius: 0.25rem;
    box-shadow: 0px 0px 3px 1px rgba(0, 0, 0, .25);
    background-color: #fff;
    pointer-events: all;
  }

.meta {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  padding: 1rem;
  text-align: center;
}
<div class="card">
  <img class="photo" src="https://farm66.staticflickr.com/65535/48808899778_bb1d4d1272_b.jpg" />
  <div class="logo">
    <img src="https://neiltongesite.s3.us-west-001.backblazeb2.com/coasters/logos/colossus-thorpe-park-resort-chertsey.png" />
  </div>
  <div class="meta">
    <p>Name here</p>
    <p>Sub title here</p>
  </div>
</div>
Clint Warner
  • 1,265
  • 1
  • 9
  • 25
rctneil
  • 7,016
  • 10
  • 40
  • 83
  • Do you want the different sized logos to resize the red retangular outline? or is it okay to have the logos clipped if the ratio is not right? – Arty.Simon May 23 '23 at 14:14

2 Answers2

1

After spending more time on this than I would care to admit, the first comment on this answer pointed me in the direction of what I believe to be the only pure CSS way to solve your problem. Apparently, when calculating top padding and margin, percentage values are taken from the width of the element. Supposedly the only way to get the height is to use a transform.

The following code should provide what you need:

* {
  box-sizing: border-box;
}

p {
  margin: 0;
}

html {
  height: 100%;
  display: grid;
  place-items: center;
}

.card {
  position: relative;
  width: 200px;
  border: 2px solid black;
}

.photo {
  display: block;
  width: 100%;
  aspect-ratio: 1/1;
  object-fit: cover;
}

.logo {
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    min-width: 100%;
    pointer-events: none;
    outline: 2px dotted red;
    /* This will slide the element up by 50% of it's total height */
    transform: translateY(-50%);
}
  
 .logo img {
    display: block;
    max-width: 50%;
    margin-top: 0;
    padding: 0.2rem;
    border-radius: 0.25rem;
    box-shadow: 0px 0px 3px 1px rgba(0,0,0,.25);
    background-color: #fff;
    pointer-events: all;
}

.meta {
   display: flex;
  flex-direction: column;
  gap: 0.5rem;
  padding: 1rem;
  text-align: center;
}
<div class="card">
    <img class="photo" src="https://farm66.staticflickr.com/65535/48808899778_bb1d4d1272_b.jpg" />
    <div class="logo">
        <img src="https://neiltongesite.s3.us-west-001.backblazeb2.com/coasters/logos/colossus-thorpe-park-resort-chertsey.png" />
    </div>
    <div class="meta">
      <p>Name here</p>
      <p>Sub title here</p>
    </div>
</div>
Clint Warner
  • 1,265
  • 1
  • 9
  • 25
  • Hey @clint-warner Thanks for your answer. The only last issue I see is I need to remove the gap that is left after translating the logo up 50%. The gap should be equal all the way around the text. Tricky aint it? It's been bugging me for ages. – rctneil May 23 '23 at 08:10
  • Well shoot. I got so excited when I finally managed to position it correctly that I didn't even notice that. – Clint Warner May 23 '23 at 12:23
  • Haha, No worries, Really appreciate you giving it a go. I'm wondering if it's totally impossible? – rctneil May 23 '23 at 13:19
  • It definitely is more difficult than it should be. Positioning has always been a pain and I thought Flex and Grid really improved things, but apparently they can still be improved! – Clint Warner May 24 '23 at 12:02
  • Yeh, I had another bash at this yesterday and failed. I think what i'm going to have to do is, put the logo in a wrapper containing it and the meta content, and get the logo positioned correctly on the X axis and then add to the logo wrapper element as an inline style, a CSS custom property containing the logos native height. Then I can use some maths to figure out how much to negative margin the content underneath so pull it into place. I THINK that would work. – rctneil May 24 '23 at 16:40
0

I took this approach where I set a aspect-ratio: 3/2; to the image in the red outline and object-fit: contain; to fill the logo inside container. Making sure it respects the width of 50%.

I included a second card in demo with an image that's taller in height to see effects of a different sized logo.

transform: translateY(-50%); is a neat trick as pointed out by @Clint Warner in answer below. Drawback is that it doesn't remove space from the DOM and I added a margin-top: -1.9rem; to the .meta class to remove space.

* {
    box-sizing: border-box;
}

p {
    margin: 0;
}

/* html {
    height: 100%;
    display: grid;
    place-items: center;
} */

body {
    display: grid;
    justify-content: center;
    grid-auto-flow: column;
    gap: 1rem;
}

.card {
    position: relative;
    width: 200px;
    border: 2px solid black;
}

.photo {
    display: block;
    width: 100%;
    aspect-ratio: 1/1;
    object-fit: cover;
}

.logo {
    display: flex;
    justify-content: center;

    outline: 2px dotted red;
    transform: translateY(-50%);
}

.logo img {
    width: 50%;
    aspect-ratio: 3/2;
    object-fit: contain;

    padding: 0.2rem;
    border-radius: 0.25rem;
    background-color: #fff;
    box-shadow: 0px 0px 3px 1px rgba(0, 0, 0, 0.25);
    pointer-events: all;
}

.meta {
    margin-top: -1.9rem;

    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    padding: 1rem;
    text-align: center;
}
<div class="card">
    <img class="photo" src="https://farm66.staticflickr.com/65535/48808899778_bb1d4d1272_b.jpg" />

    <div class="logo">
        <img src="https://neiltongesite.s3.us-west-001.backblazeb2.com/coasters/logos/colossus-thorpe-park-resort-chertsey.png" />
    </div>

    <div class="meta">
        <p>Name here</p>
        <p>Sub title here</p>
    </div>
</div>

<div class="card">
    <img class="photo" src="https://farm66.staticflickr.com/65535/48808899778_bb1d4d1272_b.jpg" />

    <div class="logo">
    
        <!-- Photo with more height than width -->
        <img src="https://neiltongesite.s3.us-west-001.backblazeb2.com/coasters/logos/batman-the-ride-six-flags-magic-mountain-valencia.png" />
    </div>

    <div class="meta">
        <p>Name here</p>
        <p>Sub title here</p>
    </div>
</div>
Arty.Simon
  • 844
  • 2
  • 7
  • 21
  • Hey @arty-simon That's great. The problem is, I need whatever logo is used to fit. Check this example using your code: https://codepen.io/rctneil/pen/WNaPRjp?editors=1100 The Batman logo gets cropped due to the object-fit. – rctneil May 23 '23 at 16:12
  • @rctneil, update cover to `object-fit: contain;` under `.logo img {`. That should contain the logo inside the red outline. Answer updated – Arty.Simon May 23 '23 at 16:21
  • @arty-simon Yes, it does, but all the logo shadow boxes are set at a 3/2 aspect. I need them tightly bound to the logo. Have a look at this URL: https://neiltonge.co.uk/parks/coasters?sort=order&logos=on This is where I have the grid of cards using this setup. You can see the extra space i wish to remove, but you can see how the shadow boxes wrap tight to the logos. – rctneil May 23 '23 at 17:01
  • @rctneil, I took a different approach and modified HTML slightly with a hardcoded height in logo container. https://codepen.io/artimys/pen/qBJgjrg?editors=1100 – Arty.Simon May 23 '23 at 18:58