保持 flex 容器中图像的纵横比

Question

我有一组 3 张图片：

我希望它们根据浏览器宽度保持纵横比。

我尝试过 flex-box，但左图和右图之间的高度总是存在差异。

我找到的实际解决方案是将左侧图像放在带有background-size: cover; 的背景中。

有没有办法使用 flex-box 来管理这样的自动比例？

.container-img {
  display: flex;
  width: 100%;
  flex-basis: 100%;
  justify-content: space-between;
  background: gold;
}
.picture-large {
  flex: 1 0 calc(77.6% - 10px);
}
.picture-large img {
  width: 100%;
}
.block-img {
  text-align: right;
}
.block-img img {
  width: calc(100% - 10px);
}
.block-img img:first-child {
  margin-bottom: 10px;
}
img {
  vertical-align: middle;
}

<div class="container-img">
  <div class="picture-large">
    <img src="http://media-cache-ec0.pinimg.com/originals/8a/70/5e/8a705e6e7d9dc34eb26cb41ac20ac9ca.jpg" alt="">
  </div>
  <div class="block-img">
    <img class="picture" src="http://static1.decosoon.com/70282-large_atch/puppy-kitten-hug-painting.jpg">
    <img class="picture" src="http://us.123rf.com/450wm/azalia/azalia1308/azalia130800062/21936902-fluffy-cat-in-a-pan--striped-not-purebred-kitten-kitten-on-a-white-background-small-predator-small-c.jpg">
  </div>
</div>

Answer 1

我使用 SaSS 来实现您的要求。

标记：

<div class="container-img">
  <div class="picture-large">
    <img src="http://media-cache-ec0.pinimg.com/originals/8a/70/5e/8a705e6e7d9dc34eb26cb41ac20ac9ca.jpg" alt="">
  </div>
  <div class="block-img">
    <img class="picture" src="http://static1.decosoon.com/70282-large_atch/puppy-kitten-hug-painting.jpg">
    <img class="picture" src="http://us.123rf.com/450wm/azalia/azalia1308/azalia130800062/21936902-fluffy-cat-in-a-pan--striped-not-purebred-kitten-kitten-on-a-white-background-small-predator-small-c.jpg">
  </div>
</div>

以下代码保存在 default.scss 文件中，然后我使用 Scout 将其编译为浏览器可以读取的 default.css 文件。

@charset 'UTF-8';

// Source: http://engageinteractive.co.uk/blog/top-10-scss-mixins#responsiveratio
@mixin responsive-ratio($x,$y, $pseudo: false) {
$padding: unquote( ( $y / $x ) * 100 + '%' );
@if $pseudo {
    &:before {
        @include pseudo($pos: relative);
        width: 100%;
    }
  }
}

// Source: http://aricedev.azurewebsites.net/perfectly-centering-images-with-dynamic-sizes/
@mixin flexbox {
display: -webkit-box;
display: -webkit-flex;
display: -moz-flex;
display: -ms-flexbox;
display: flex;
}

@mixin perfect-center {
@include flexbox;
-webkit-justify-content: center;
justify-content: center;
-webkit-align-items: center;
align-items: center;
}


.container-img {
width:100%;
display: flex;
flex-basis: 100%;
background: gold;
display: flex;
justify-content: center;
align-items: center;

  .picture-large {
  float:left;
  width:100%;
  object-fit: contain;

  // Ratio based on defined 1150px by 700px dimensions
  // Caluclated at: http://andrew.hedges.name/experiments/aspect_ratio/
  @include responsive-ratio(23,14);
    img {max-width:100%; height:auto;}
  }
  .block-img {
  justify-content: center;
  align-items: center;
  width:30%;
  float:right;
  background:green;
  // Ratio based on equal width and height dimensions defined
  @include responsive-ratio(1,1);
  img {width:100%; max-width:350px; max-height:350px;
    &.picture {}
  }
 }
}

default.css 输出如下：

@charset "UTF-8";
.container-img {
width: 100%;
display: flex;
flex-basis: 100%;
background: gold;
display: flex;
justify-content: center;
align-items: center;
}
.container-img .picture-large {
float: left;
width: 100%;
object-fit: contain;
}
.container-img .picture-large img {
max-width: 100%;
height: auto;
}
.container-img .block-img {
justify-content: center;
align-items: center;
width: 30%;
float: right;
background: green;
}
.container-img .block-img img {
width: 100%;
max-width: 350px;
max-height: 350px;
}