Question

在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>

对我有任何暗示吗？

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

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

1 个答案: