我有一个三列Holy Grail layout，左右列的宽度是固定的，中间列是流动的。布局的高度由中间列的内容定义。在右栏中，我需要一个完整的出血中心裁剪图像。这是困难的部分。我有一个我here的样本，但是我明确地将图像的高度定义为180px，我希望它能够简单地增长到高度中心栏。另外，我希望尽可能避免使用javascript而且没有必要使用flexbox，这是迄今为止我能想到的最好的。
答案 0 :(得分：1)
除非您明确需要使用<img>标记，否则您可以使用内联css样式来控制background-image的{{1}}，而不是将其作为div中的元素放置}
div然后使用一些CSS，您可以控制图像的中心和丰满度。注意：假设您正在使用<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>
flex-box