中心裁剪img填充格

Question

我有一個三列Holy Grail layout是左右列的寬度是固定的，中心列是流體。佈局的高度由中心列的內容定義。在右欄中我需要一個完整的出血中心裁剪圖像。這是困難的部分。我有一個樣本，我要爲here做什麼，但是我明確地定義了圖像的高度爲180px，我希望它只是增長到中心列的高度。此外，我想盡可能避免使用JavaScript，並且不需要使用flexbox，這是迄今爲止我所能想到的最好的。

Answer 1

除非你明確地需要使用<img>標籤，你可以使用內聯CSS樣式來控制div的background-image而不是在div

For example將作爲一個元素：

<div class="container"> 
    <div class="col1"></div> 
    <div class="col2"> 
     Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis nec rhoncus orci, eget eleifend risus. Maecenas suscipit arcu et aliquet tristique. Quisque venenatis est a maximus consectetur. Nam id fringilla odio. Mauris lobortis nec lorem nec congue. Maecenas elit risus, vestibulum vitae quam eu, ultrices condimentum dolor. Mauris magna nulla, congue eu enim a, fringilla cursus elit. Nulla tempor finibus eleifend. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. 
    </div> 
    <div class="col3"> 
     <div class="fill" style="background-image:url('http://upload.wikimedia.org/wikipedia/commons/thumb/5/55/Mona_Lisa_headcrop.jpg/36px-Mona_Lisa_headcrop.jpg');"> 
     </div> 
    </div> 
</div> 

然後使用一些CSS你可以控制圖像的中心和豐滿度。注：我認爲CSS3風格確定爲您實現您正在使用flex-box

.container { 
    display: flex; 
    flex: 1; 
} 

.col1 { 
    background-color: hotpink; 
    order: 0; 
    flex: 0 0 50px; 
} 

.col2 { 
    background-color: deepskyblue; 
    order: 1; 
    flex: 1; 
} 

.col3 { 
    background-color: hotpink; 
    order: 3; 
    flex: 0 0 70px; 
    position:relative; 
} 

.fill { 
    position:absolute; 
    top:0; 
    left:0; 
    right:0; 
    bottom:0; 
    background-repeat:no-repeat; 
    background-size:cover; 
    background-position:center center; 
}