适合div

Question

如何让image和canvas适合outerWrapper？

所以基本上我希望能够仅通过更改canvas的高度和宽度来更改image和outerWrapper比例。

FIDDLE

<div class="parent">

  <div class="outerWrapper">

    <div class="wrapper">

      <div Style="width: 100%; height: 100%; position: absolute;">
        <canvas width="275" height="412" Style="background-color: lightblue;opacity:0.5;"></canvas>
      </div>

      <div Style="width: 100%; height: 100%; position: relative;">
        <img width="275" height="412" Style="position:relative;" src="http://www.tiikoni.com/tis/view/?id=9d3a714" />
      </div>  

    </div>

  </div>

</div>

CSS

.parent{
  width: 800px;
  height: 400px;
  background-color: pink;
  position:relative;
}
.outerWrapper{
  width:25%;
  height:75%;
  position:relative;
  display:inline-block;
  background-color: blue;
}
.wrapper{
  width: 100%;
  height: 100%;
  position: relative;
}

Answer 1

将img和canvas上的'412'替换为:auto;或使用百分比。希望这有帮助！

Answer 2

我这样做了。如果它仍然不是你想要的，请告诉我，谢谢。

以下是我工作的链接：https://jsfiddle.net/45Lqfeyk/2/ HTML：

<div class="parent">      
   <div class="outerWrapper">
    <canvas width="275"   Style="background-color: lightblue;opacity:0.5;"></canvas>

    <img width="275"   src="http://www.tiikoni.com/tis/view/?id=9d3a714" />

   </div>      
</div>

CSS：

.parent{
width: 800px;
height: 400px;
background-color: pink;
display: block;
}
.outerWrapper {
position: relative;
background: yellow;
max-width: 300px;
height:40%;
}
canvas {
position: absolute;
height: 60%;
width: 60%;
}
img {
position: absolute;
height: 50%;
width: 50%;
border: 1px solid black;
}