Separate css style for img inside a - html

Question

I have html code:
<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>
So what this basically does is show users name and picture next to his name. Currently the picture is too big and when I try to resize it by adding style="height: 33px" in img tag, the users name also resizes but I only want to resize picture.
The css classes are built in from component we use so I can't show them.

Answer 1

This should work fine. put this in your CSS declarations.
a img {
/*
CSS styles here
*/
}

Answer 2

Just add your style="height: 33px;" on the img tag itself. That said, it is often preferable to add the CSS to a class, and add the class to the img tag.

Answer 3

You can add width and height directly in img tag
<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 4

You can simply create a new class for img only like this:
<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>