使图像缩小到可用高度不扩大其母公司

列具有相同的宽度（响应）
块的高度被定义拉伸至其父项的100％后，左列中包含的图像的高度。
在右栏中有几个元素，其中之一是包含图像的链接。

我希望与来自上一段的图像的链接缩小它的包含原始图像纵横比的高度，而不会在图像具有纵向方向时伸展它的容器。

不确定它可能与纯CSS。尝试用flexbox和网格布局，但我必须错过一些东西。

我准备了一个小提琴：https://jsfiddle.net/Kuznets/8u6c70ku/3/

* { box-sizing: border-box } 
 
.wrap { max-width: 80%; margin: 0 auto; } 
 
.container { display: flex; } 
 
.left, .right { 
 
    flex: 0 0 50%; 
 
    border: 1px solid black; 
 
} 
 
.left { 
 
    position: relative; 
 
    display: flex; 
 
    align-items: flex-end; 
 
} 
 
.left div.left-text { 
 
    position: absolute; 
 
    color: white; 
 
    padding: 1em; 
 
    font-size: 200%; 
 
} 
 
.should-set-height { 
 
    width: 100%; 
 
} 
 

 
.right { 
 
    display: flex; 
 
    flex-direction: column; 
 
    align-items: center; 
 
    justify-content:space-between; 
 
}

<div class="wrap"> 
 
    <div class="container"> 
 
    <div class="left"> 
 
     <img class="should-set-height" src="https://dummyimage.com/200x240/aaaaaa/ffffff" alt=""> 
 
     <div class="left-text"> 
 
     This is a beautiful slogan 
 
     </div> 
 
    </div><!--/.left--> 
 
    <div class="right"> 
 
     <header>Product title</header> 
 
     <a class="fit-height" href="javascript:void(0)"> 
 
     <img class="should-shrink" src="https://dummyimage.com/200x400/aaaaaa/ffffff"> 
 
     </a> 
 
     <div class="price">$ 19.99</div> 
 
     <button class="button-black">Add to basket</button>  
 
    </div><!--/.right--> 
 
    </div><!--/.containter--> 
 
</div><!--/.wrap-->

来源

2017-10-12 Dmitry Kuznetsov