保持圖像的長寬比在柔性容器

Question

我有一組3張圖片：

我希望他們能夠保持他們的高寬比根據瀏覽器的寬度。

我試過彈性盒子，但左圖像和右圖像之間總是有高度差異。

我找到的實際解決方案是將左圖像放在背景中，並使用background-size: cover;。

有沒有一種方法用柔性盒來管理這樣的自動比率？

.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文件，然後我使用偵察編譯成瀏覽器可以讀取的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; 
}