Question

我有HTML代码：

<div  class="btn-header transparent pull-right">
    <span>
        <a (click)="userInfo()" class="dropdown-toggle no-margin userdropdown">
            {{ userAccount()?.given_name }}
            <img  src="assets/img/avatars/male.png" />
        </a>
    </span>
</div>

所以这基本上就是在他的名字旁边显示用户名和照片。目前图片太大，当我尝试通过在img标签中添加style="height: 33px"来调整大小时，用户名也会调整大小，但我只想调整图片大小。

css类是使用我们使用的组件构建的，所以我无法显示它们。

Answer 1

只需在style="height: 33px;"标记本身上添加img即可。也就是说，通常最好将CSS添加到类中，并将类添加到img标记中。

Answer 2

您可以直接在width代码

中添加height和img

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div  class="btn-header transparent pull-right">
    <span>
        <a (click)="userInfo()" class="dropdown-toggle no-margin userdropdown">
            {{ userAccount()?.given_name }}
            <img  src="assets/img/avatars/male.png" width="33" height="33" />
        </a>
    </span>
</div>

Answer 3

这应该可以正常工作。把它放在CSS声明中。

a img {
/*
CSS styles here
*/
}

Answer 4

你可以像这样简单地为img创建一个新类：

＆＃13;

    <style>
img.Employee{
      height:33px;
      vertical-align:middle;
    }
</style>

    <div  class="btn-header transparent pull-right">
    <span>
        <a (click)="userInfo()" class="dropdown-toggle no-margin userdropdown">
            {{ userAccount()?.given_name }}
            <img class="Employee" src="assets/img/avatars/male.png" alt="image" />
        </a>
    </span>
</div>

＆＃13;

在一个内部为img分离css样式

4 个答案: