有图像拉伸和填充列

Question

目前我有一个促销部分，我正在尝试添加到我的网站。促销部分有3张图片。左列中的第一个，接下来的两个图像在第二列上垂直对齐。第二列上的2个图像是完美的，左边的图像没有调整到正确的大小，它应该拉伸并填充整个列。

代码（http://codepen.io/anon/pen/eZGzOw）：

power_value

我尝试将图像样式设置为最大高度/最大宽度100％，宽度/高度自动。

Answer 1

如果要保留纵横比，则flex-box是解决方案。

给

.row {
  display: flex;
}
.medium-8{
  flex: 1.50; // adjust this for better aspect ratio
}
.medium-4{
  flex: 0.55; // adjust this for better aspect ratio
}

删除图片上方的p标记，以获得更好的效果。

请参阅 PEN