使图像响应70％的父母高度，但自动宽度

Question

in angular.js我想设置一个Logo应该有70％的父母的高度和自动宽度，它不会被裁剪。

<md-content id="WelcomeView" ng-controller="WelcomeController" layout="column" flex> 
    <md-content id="LogoElement" layout="row" flex="60" layout-align="center end"> 
     <img layout="row" src="styles/assets/dml-logo.png" ng-style="view.logo"/> 
    </md-content> 
    <md-content layout="row" flex layout-align="center start"> 
     <md-content layout="column" flex> 
      <md-content layout="row" flex layout-align="center center"><H1>Arbeitsprobe</H1></md-content> 
      <md-content layout="row" flex layout-align="center center"><H2>by Dirk Moll</H2></md-content> 
      <md-content layout="row" flex layout-align="center center"><H3>in 2016</H3></md-content> 
     </md-content> 
    </md-content> 
</md-content> 

对我有什么提示？

铜n00n

Answer 1

CodePen

图像不拉伸，虽然如果高度始终是70％。

标记

<div id="parent"> 
    <div layout-fill layout="column"> 
    <div id="logo" flex="70"> 
    </div> 
    </div> 
</div> 

CSS

#parent { 
    width: 300px; 
    height: 500px; 
    background: yellow; 
} 

#logo { 
    background-image: url("http://m.hiapphere.com/data/icon/201409/HiAppHere_com_kov.theme.lumos.png"); 
    background-size: 100% 100%; 
}