Question

我不知道我做错了什么。它在firefox中看起来很好，但在chrome中我的图像都被拉得很高。我已经尝试了各种我在网上找到的解决方案，比如将img的min-height设置为0或者添加一个高度：auto代码，似乎没什么用。是刚刚破坏的chrome中的flexbox？

这是我的代码的JSFiddle。

https://jsfiddle.net/xyk537n1/

* {
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}

.media li,
#sitetitle {
  -moz-transition: all 0.3s ease;
  -o-transition: all 0.3s ease;
  -webkit-transition: all 0.3s ease;
  -ms-transition: all 0.3s ease;
  transition: all 0.3s ease
}

#sitetitle:hover,
.media li:hover {
  -moz-transition: all 0.2s ease;
  -o-transition: all 0.2s ease;
  -webkit-transition: all 0.2s ease;
  -ms-transition: all 0.2s ease;
  transition: all 0.2s ease;
}

a:visited {
  color: inherit
}

html,
body {
  background: url('img/bg02.jpg') #233 top;
  /* min-width:1310px; */
  font: normal .95em 'Source Sans Pro', Helvetica, Arial, Verdana, Sans-Serif;
  color: #233
}

h2,
figcaption {
  font: normal 1.65em 'Dosis', Helvetica, Arial, Verdana, Sans-Serif
}

abbr {
  border-bottom: 1px dotted #233;
  text-transform: uppercase;
}

article {
  max-width: 100%
}

#sitetitle {
  display: inline-block;
  padding: 0 0 .2em .3em;
  color: #fff;
  text-decoration: none;
  font: bold calc(2.1em + 1.5vw) 'Source Sans Pro', Helvetica, Arial, Verdana, Sans-Serif;
  text-shadow: 1px 1px 2px #000;
}

#sitetitle:hover {
  text-shadow: 1px 1px 5px #000
}

.clear {
  clear: both
}

.wrapper {
  padding: .5em;
  background: rgb(34, 51, 51);
  background: rgba(34, 51, 51, 0.8)
}

.wrapper {
  display: flex;
  flex-flow: row wrap;
}

.wrapper>* {
  flex: 1 100%;
}

.column {
  max-width: 100%
}

.block {
  background: #bbb;
  padding: .5em;
}

.block {
  margin: .5em;
  text-decoration: none;
  color: #233;
  position: relative;
  overflow: hidden;
  z-index: 100
}

.block {
  box-shadow: 0 7px 5px -5px black
}

.block img {
  max-width: 100%;
  min-height: 0;
}

.media li {
  flex-wrap: wrap;
  position: relative
}

.media li {
  max-width: 50%;
  float: left;
  padding: .5em
}

.media a {
  display: flex;
}

.media li:hover {
  background: #fff
}

.media li a strong {
  float: left;
  position: absolute;
  background: #233;
  color: #bbb;
  padding: 5px;
  margin-right: .5em;
  font-size: calc(.5em + 1.5vw);
}

.media {
  border-top: 6px solid #7d1
}

.media a {
  text-decoration: none;
  color: #233
}

#footer {
  padding: 1.5em 1em;
  color: #fff;
}

<header>
  <a href="/" id="sitetitle">testsite.com</a>
</header>
<div class="wrapper">
  <article class="column">
    <ul class="block media">
      <li>
        <a href="https://i.imgur.com/ufW4BAE.jpg" data-lightbox="foliogal" target="_blank"><img src="https://i.imgur.com/ufW4BAE.jpg" /><strong>Render > BMD Company logo > 2013</strong></a>
      </li>
      <li>
        <a href="https://i.imgur.com/ufW4BAE.jpg" data-lightbox="foliogal" target="_blank"><img src="https://i.imgur.com/ufW4BAE.jpg" /><strong>Render > Wireless internet ad > 2011</strong></a>
      </li>
      <li>
        <a href="https://i.imgur.com/5YFSgau.jpg" data-lightbox="foliogal" target="_blank"><img src="https://i.imgur.com/5YFSgau.jpg" /><strong>Graphic > Business ad > 2012</strong></a>
      </li>
      <li>
        <a href="https://i.imgur.com/5YFSgau.jpg" data-lightbox="foliogal" target="_blank"><img src="https://i.imgur.com/5YFSgau.jpg" /><strong>Graphic > Business ad > 2012</strong></a>
      </li>
      <li>
        <a href="https://i.imgur.com/ufW4BAE.jpg" data-lightbox="foliogal" target="_blank"><img src="https://i.imgur.com/ufW4BAE.jpg" /><strong>Render > NukaCola cooler model > 2010</strong></a>
      </li>
      <li>
        <a href="https://i.imgur.com/ufW4BAE.jpg" data-lightbox="foliogal" target="_blank"><img src="https://i.imgur.com/ufW4BAE.jpg" /><strong>WIP > Goggles/Headphones > 2010</strong></a>
      </li>
      <li>
        <a href="https://i.imgur.com/ufW4BAE.jpg" data-lightbox="foliogal" target="_blank"><img src="https://i.imgur.com/ufW4BAE.jpg" /><strong>WIP > Goggles/Headphones > 2010</strong></a>
      </li>
      <li>
        <a href="https://i.imgur.com/ufW4BAE.jpg" data-lightbox="foliogal" target="_blank"><img src="https://i.imgur.com/ufW4BAE.jpg" /><strong>Screenshot > jb_orange > 2009</strong></a>
      </li>
    </ul>
  </article>
  <p id="footer">footerfooterfooter foooter fooooooooooter.</p>
</div>

Answer 1

Flex容器的初始设置为align-items: stretch。

尝试将值切换为flex-start。

Chrome和FF似乎处理方式不同。

.media a {
  display: flex;
  align-items: flex-start; /* NEW */
}

revised demo

防止Flex容器内的图像在Chrome中拉伸

1 个答案: