CODEWITHSUNDEEP
htmlcssimage
Jay Hong
Jay Hong

Reputation: 27

I have trouble changing the size of my image on HTML & CSS

<div class="profile">
  <img src="image/JaeHeadShot.jpg" alt="Head Shot"/>
  <h1> Jae Hong </h1>
</div>

.profile{
  border: 2px solid rgba(0,0,0,0.3);
  text-align:center;
  padding: 30px;
}
img.profile{
  width:423;
  height:281;
}

Here are my HTML and CSS. I am not sure what I'm doing wrong, but the image won't get smaller. However, if I do 

<img src="image/JaeHeadShot.jpg" alt="headshot" width="423" height="281"/>

the image seems to change. I just want to know why it's not working when I work on the CSS.

Appreciate your help!

Upvotes: 0

Views: 29

Answers (3)

AswathyPrasad
AswathyPrasad

Reputation: 361

profile is the class for the div element, not for the image. 

img.profile{
  width:423;
  height:281;
}

if you want to use special css for the image you can define a class for it.

.myImage{ width: 423px; height: 281px}

and use it in image tag.

<img src="image/JaeHeadShot.jpg" alt="headshot" class=".myImage"/>

Upvotes: 0

bigbounty
bigbounty

Reputation: 17408

The image doesn't have a class attribute in your code.So,accessing it with class profile won't fetch you image. So,as there is only image,you can just give img { width:423; height:281; }

Upvotes: -1

gaganshera
gaganshera

Reputation: 2639

The img.profile wont select the image since the image doesn't have a profile class, and the numbers are missing the units.

Do it like this:

img {
    width  : 423px;
    height : 281px;
}

Upvotes: 2

Related Questions