使圖像縮小到可用高度不擴大其母公司

Question

我試圖創建一個兩列的部分，其中：

1. 列具有相同的寬度（響應）
2. 塊的高度被定義拉伸至其父項的100％後，左列中包含的圖像的高度。
3. 在右欄中有幾個元素，其中之一是包含圖像的鏈接。

我希望與來自上一段的圖像的鏈接縮小它的包含原始圖像縱橫比的高度，而不會在圖像具有縱向方向時伸展它的容器。

不確定它可能與純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-->

Answer 1

一個你能做到這一點是有左圖像設置爲具有width: 100%, height: auto;然後使用背景圖片爲右容器的方式。

這裏有CodePen一個快速演示：https://codepen.io/patriziosotgiu/pen/NaBmZe?editors=1100

您還可以添加額外的規則，例如像min-width用於左欄中，或有這些列適合在一列移動。

注：我假設左圖像大於200x240像素