CODEWITHSUNDEEP
htmlcss
OjamaYellow
OjamaYellow

Reputation: 969

Separate css style for img inside a

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.

Upvotes: 0

Views: 104

Answers (4)

Mik3NL
Mik3NL

Reputation: 425

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>

Upvotes: 0

Hammed Oyedele
Hammed Oyedele

Reputation: 1215

This should work fine. put this in your CSS declarations.

a img {
/*
CSS styles here
*/
}

Upvotes: 1

Manish Patel
Manish Patel

Reputation: 3674

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>

Upvotes: 1

DingusKhan
DingusKhan

Reputation: 123

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.

Upvotes: 1

Related Questions