0

I have a layout with an image on the left, text on the right. I'm using flexbox along with object-fit on the image to ensure the image stays the full height of the parent, with the text staying in the vertical middle. This is working fine in Chrome and Firefox, but I am having trouble getting it to work in Safari (I'm using 10.1), even if I put align-items: stretch on the parent.

HTML

<div class="o-grid">

    <div class="o-grid__item u-1/2@s post__feat-img">

        <a class="thumbnail-wrapper" href="#">
            <img width="730" height="730" src="/">
        </a>

    </div>

    <div class="o-grid__item u-1/2@s">
    </div>

</div>

CSS

.o-grid {
    display: flex;
    display: -webkit-flex;
    align-items: center;
    -webkit-align-items: center;
}

.post__feat-img {
    align-self: stretch;
    -webkit-align-self: stretch;
}

.thumbnail-wrapper {
    display: block;
}

.thumbnail-wrapper, .thumbnail-wrapper img {
    height: 100%;
}

.thumbnail-wrapper img {
    object-fit: cover;
}

If I inspect the element in safari, .post__feat-img is stretching but the a tag within isn't.

Edit: Following the 4th solution here to a similar question, I tweaked my CSS to the following:

New CSS

    .o-grid {
        display: flex;
        align-items: center;
    }
    .post__feat-img {
        display: flex;
        align-self: stretch;
        flex: 1;
    }
    .thumbnail-wrapper {
        display: flex;
        flex: 1;
    }
    .thumbnail-wrapper img {
        object-fit: cover;
    }

This fixes it in Safari, but breaks the layout only in Chrome, not Firefox. What happens is the div stretches to the full height of the image, rather than the image maintaining aspect ratio based on the parent width.

ohvienna
  • 63
  • 6
  • That does not work. @ and / are valid in css class names, they just have to be escaped with a backslash in the css file. https://mathiasbynens.be/notes/css-escapes – ohvienna May 22 '17 at 11:00
  • Are you sure they are valid attribute characters though - https://www.w3.org/TR/html401/intro/sgmltut.html#attributes (Can't find the html5 version of this doc) but from this you can see: *The attribute value may only contain letters (a-z and A-Z), digits (0-9), hyphens (ASCII decimal 45), periods (ASCII decimal 46), underscores (ASCII decimal 95), and colons (ASCII decimal 58).* – Pete May 22 '17 at 11:38
  • You're not using *height: 100%* properly: http://stackoverflow.com/a/31728799/3597276 ... and see the duplicate for other solutions. – Michael Benjamin May 22 '17 at 11:51

0 Answers0