CODEWITHSUNDEEP
htmlcssflexbox
thetailor.de
thetailor.de

Reputation: 312

Image is stretched on Safari with display flex

I created a codepen so you can see what I mean. The a element gets its height from a script and the complete code works great on all devices except iOS. On mobile Safari (I didnt test the desktop version yet) the image gets streched. First I thought its because of the height: 100% i´d given it, but after removing it, it still wasnt working.

The goal was to get the image centered allways with flex. I use flex alot on that page, so I wanted to use it there as well.

http://codepen.io/notyetnamed/pen/gaboXK

EDIT: I tested it via browserstack on OS X and there is the same problem if you make the window small enough.

Upvotes: 2

Views: 4298

Answers (3)

Николай Пушкин
Николай Пушкин

Reputation: 169

just set "align-self: center" for img or align-items: center for parent

Upvotes: 0

thetailor.de
thetailor.de

Reputation: 312

It seams to be not possible right now because of a bug in Safari, Firefox and some others.

So I removed the flex properties and added some normal style to keep the image centered in its container.

.box img {
  height: 100%;
  width: auto;
  position: absolute;
  left: -100%;
  right: -100%;
  top: -100%;
  bottom: -100%;
  margin: auto;
  max-width: none;
}

http://codepen.io/notyetnamed/pen/dYYYxP

Upvotes: 1

zer00ne
zer00ne

Reputation: 44086

Ok I changed a considerable amount. I'll give you the highlights:

  1. Narrowed down all flex properties. The only prefix needed is -webkit for Safari.
  2. Set the .body position: relative and height: 100vh andwidth: 100vw`
  3. Gave the inner <div> a name .content
  4. Made .box a block-level <section>
  5. Made the .body a <main>
  6. Placed colored borders to display each element's position and size.

>>>DEMO

CSS

html {
  box-sizing: border-box;
  font: small-caps 400 16px/1.45'Source Code Pro';
}
*,
*:before,
*:after {
  box-sizing: inherit;
  margin: 0;
  padding: 0;
  border: 0 solid transparent;
  text-decoration: none;
  list-style-type: none;
}
body {
  color: #fff;
  background: #000;
  height: 100vh;
  width: 100vw;
}
.frame {
  position: relative;
  outline: 2px solid yellow;
}
.frame:before {
  display: block;
  content: "";
  width: 100%;
  padding-top: 56.25%;
  padding-bottom: 1.5em;
}
.content {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  outline: 2px solid blue;
  background-image: url(http://placehold.it/818x435/000/fff.png&text=818x435);
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
  background-attachment: fixed;
  z-index: 555;
}
.caption {
  position: fixed;
  left: 0;
  bottom: 0;
  width: 50%;
  background-color: #fff;
  background-color: rgba(255, 255, 255, 0.9);
  padding: 1.8em;
  z-index: 999;
}
.caption h2 {
  font-size: 2.2rem;
  font-weight: 400;
  line-height: 4;
  margin-bottom: 1em;
  color: #000;
}
.caption p {
  font-size: .8rem;
  color: #000;
}
<main>

  <div class="frame">
    <a class="content" href="https://stackoverflow.com/">
      <div class="caption">

        <h2>Lorem ipsum dolor sit amet</h2>
        <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis.</p>

      </div>
    </a>
  </div>
</main>

UPDATE: Here's a centered version without flexbox. I think there's a bug in Firefox and/or Safari when trying to overlay flex-items.

>>>DEMO

Upvotes: 0

Related Questions