Flex父级中的图像未在Chrome中溢出

时间：2019-06-13 10:25:21

标签： html css google-chrome flexbox

我的图片在Chrome上运行异常，并且缩小了。我正在尝试达到类似Firefox的效果，但是图像没有溢出，而是缩小了。

这是我的代码。在chrome和firefox中检查我的第二张卡片图像：

<div class="card-group">
  <div class="card">
    <div class="card__imgContainer">
      <img class="card__img" src="https://www.pierrot-bg.com/images/news/2.jpg" alt="Меко казано" style="">
    </div>
    <div class="card__content">
      <h2 class="card__heading">Lorem ipsum dolor sit amet.Lorem ipsum dolor sit amet..</h2>
      <div class="card__info">
        <span class="card__time"><span class="card__icon icon-calendar"></span>02.06.2019;</span>
        <span class="card__price"><span class="card__icon icon-price--sm"></span>8.00 лв; 10.00 лв; 12.00лв;</span>
      </div>
      <div class="card__buttons">
        <a class="button card__button" href="./spectacle.html">Виж повече</a>
        <a class="button button--plum button--buy card__button" href="">Купи билет <span class="button__icon icon-price"></span></a>
      </div>
    </div>
  </div>

  <div class="card">
    <div class="card__imgContainer">
      <img class="card__img" src="https://www.pierrot-bg.com/images/news/Meko-kazano_1.jpg" alt="Меко казано" style="">
    </div>
    <div class="card__content">
      <h2 class="card__heading">Lorem, ipsum.</h2>
      <div class="card__info">
        <span class="card__time"><span class="card__icon icon-calendar"></span>02.06.2019;</span>
        <span class="card__price"><span class="card__icon icon-price--sm"></span>8.00 лв; 10.00 лв; 12.00лв;</span>
      </div>
      <div class="card__buttons">
        <a class="button card__button" href="./spectacle.html">Виж повече</a>
        <a class="button button--plum button--buy card__button" href="">Купи билет <span class="button__icon icon-price"></span></a>
      </div>
    </div>
  </div>

</div>


.card {
  & {
    display: flex;
    flex-direction: column;
    position: relative;
    width: 60%;
  }
  &__imgContainer {
    flex: 1 1 auto;
    display: flex;
    justify-content: center;
    overflow: hidden;
  }
  &__img {
    display: block;
    flex: 1 1 0;
    width: 100%;
  }
  &__content {
    padding: 10px 30px 15px;
    background: #4821f5;
    /* Old browsers */
    background: -moz-linear-gradient( 45deg, #4821f5 0%, #3b8dd4 100%);
    /* FF3.6-15 */
    background: -webkit-linear-gradient( 45deg, #4821f5 0%, #3b8dd4 100%);
    /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient( 45deg, #4821f5 0%, #3b8dd4 100%);
    /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr="#4821f5", endColorstr="#3b8dd4", GradientType=1);
    /* IE6-9 fallback on horizontal gradient */
  }
  &__info {
    & {
      margin-top: 15px;
      margin-bottom: 10px;
    }
    &>* {
      display: block;
      font-size: 13px;
      display: flex;
      align-items: center;
    }
    &>*+* {
      margin-top: 5px;
    }
  }
  &__icon {
    margin-right: 6px;
    line-height: inherit;
  }
  &__heading {
    font-size: 36px;
    line-height: 1;
  }
  &__buttons {
    & {
      display: flex;
      flex-wrap: wrap;
      margin: -8px;
    }
    &>* {
      margin: 8px;
    }
  }
  &__button {
    padding-top: 0.65em;
    padding-bottom: 0.65em;
  }
  &__textbox {
    margin-top: 20px;
  }
}

.card-group {
  display: flex;
  flex-wrap: wrap;
  margin: -1%;
  &>* {
    width: 31%;
    margin: 1%;
  }
}

Js Fiddle

我希望我的图像在Firefox中表现像那样，并像这样被剪切，并且我不想使用对象适配。

1 个答案:

答案 0 :(得分：2)

h1,
h2,
h3,
h4,
h5,
h6 {
  margin: 0;
}

.card {
  display: flex;
  flex-direction: column;
  position: relative;
  width: 60%;
}

.card__imgContainer {
  flex: 1 1 auto;
  display: flex;
  justify-content: center;
  overflow: hidden;
}

.card__img {
  display: block;
  flex: 1 1 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.card__content {
  padding: 10px 30px 15px;
  background: #4821f5;
  /* Old browsers */
  background: -moz-linear-gradient(45deg, #4821f5 0%, #3b8dd4 100%);
  /* FF3.6-15 */
  background: -webkit-linear-gradient(45deg, #4821f5 0%, #3b8dd4 100%);
  /* Chrome10-25,Safari5.1-6 */
  background: linear-gradient(45deg, #4821f5 0%, #3b8dd4 100%);
  /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr="#4821f5", endColorstr="#3b8dd4", GradientType=1);
  /* IE6-9 fallback on horizontal gradient */
}

.card__info {
  margin-top: 15px;
  margin-bottom: 10px;
}

.card__info>* {
  display: block;
  font-size: 13px;
  display: flex;
  align-items: center;
}

.card__info>*+* {
  margin-top: 5px;
}

.card__icon {
  margin-right: 6px;
  line-height: inherit;
}

.card__heading {
  font-size: 36px;
  line-height: 1;
}

.card__buttons {
  display: flex;
  flex-wrap: wrap;
  margin: -8px;
}

.card__buttons>* {
  margin: 8px;
}

.card__button {
  padding-top: 0.65em;
  padding-bottom: 0.65em;
}

.card__textbox {
  margin-top: 20px;
}

.card-group {
  display: flex;
  flex-wrap: wrap;
  margin: -1%;
}

.card-group>* {
  width: 31%;
  margin: 1%;
}
<div class="card-group">
  <div class="card">
    <div class="card__imgContainer">
      <img class="card__img" src="https://www.pierrot-bg.com/images/news/2.jpg" alt="Меко казано" style="">
    </div>
    <div class="card__content">
      <h2 class="card__heading">Lorem ipsum dolor sit amet.Lorem ipsum dolor sit amet..</h2>
      <div class="card__info">
        <span class="card__time"><span class="card__icon icon-calendar"></span>02.06.2019;</span>
        <span class="card__price"><span class="card__icon icon-price--sm"></span>8.00 лв; 10.00 лв; 12.00лв;</span>
      </div>
      <div class="card__buttons">
        <a class="button card__button" href="./spectacle.html">Виж повече</a>
        <a class="button button--plum button--buy card__button" href="">Купи билет <span class="button__icon icon-price"></span></a>
      </div>
    </div>
  </div>

  <div class="card">
    <div class="card__imgContainer">
      <img class="card__img" src="https://www.pierrot-bg.com/images/news/Meko-kazano_1.jpg" alt="Меко казано" style="">
    </div>
    <div class="card__content">
      <h2 class="card__heading">Lorem, ipsum.</h2>
      <div class="card__info">
        <span class="card__time"><span class="card__icon icon-calendar"></span>02.06.2019;</span>
        <span class="card__price"><span class="card__icon icon-price--sm"></span>8.00 лв; 10.00 лв; 12.00лв;</span>
      </div>
      <div class="card__buttons">
        <a class="button card__button" href="./spectacle.html">Виж повече</a>
        <a class="button button--plum button--buy card__button" href="">Купи билет <span class="button__icon icon-price"></span></a>
      </div>
    </div>
  </div>

</div>

.card__img必须有height和100%的{​​{1}}

相关问题
最新问题