div内のキャンバスとイメージに合わせて

Question

imageとcanvasをouterWrapperの内部に収めておくにはどうすればよいですか？

基本的にouterWrapperの高さと幅を変更するだけで、canvasとimageの比率を変更できるようにしたいと考えています。

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

は:auto;または使用パーセンテージとIMGとキャンバス上'412'を交換します。お役に立てれば！

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; 
}