Question

我正在尝试用3张图片创建一个响应式图形。左帽，右帽和中间件，可扩展以填充。起初很简单，但事实证明很难。这是我的HTML。

<div class="wrapper">
   <div class="left">
      <img src="leftcap.png"/>
   </div>
   <div class="middle">
      <img src="middlepiece.png"/>
   </div>
   <div class="right">
      <img src="rightcap.png"/>
   </div>
</div>

和我的css ......

.wrapper{
   height:30%;
   width:100%;
   display:flex;
}

.middle{
   flex-grow:1;
}

我希望左上角的宽度只需要根据我的图像大小和它的父级的30％高度，按比例缩放和右对齐。

我希望正确的上限只需要根据我的图像大小和它的父级的30％高度，按比例缩放并左对齐来扩展。

最后，我希望中间图像能够拉伸以填充任何剩余的宽度以及它的父级的30％高度。

就像我说的那样，我认为这很简单，但我没有提出任何好主意。我试过flexbox和表。如果您正在寻找一些上下文，这是我使用表格的示例。图像不尊重父级高度或宽度。任何想法都将不胜感激。

http://codepen.io/asellenrick/pen/qdrrZw

Answer 1

.c img {
  height: 30%;
  width: 100%;
  max-width: 100%;
}
.c{
    width: auto;
}
.c:nth-child(2){
    width:100%;
    width: Calc(100% - 426px);
}

应该这样做。

可变高度的3切片扩展图像

1 个答案: