CODEWITHSUNDEEP
htmlcss
steve02a
steve02a

Reputation: 69

CSS not working or changing image size

Can anyone tell me what is wrong with my CSS here

Code:

#contact {
  height: 50%;
  length: 50%;
}
<div id="contact">
  <a href="http://amazon.com/">`
       <img src="http://i.imgur.com/GMldHhn.jpg" />
    </a>
</div>

Either I'm blind or I totally forgot CSS, but this has to be the most simple CSS, yet it doesn't work. The image size is not reduced at all. It's not affected a tall. Even if I change the 50% to 10px it still doesn't do anything. And I can't seem to figure it out.

Upvotes: 0

Views: 5743

Answers (4)

dippas
dippas

Reputation: 60563

There is no length property, instead use width and you need to apply the properties to img not the (grand)parent div contact

Snippet

#contact img {
 height: 50%;
  width: 50%;
}
<div id="original">
  <a href="http://amazon.com/">
    <img src="http://i.imgur.com/GMldHhn.jpg" />
  </a>
</div>
<hr />
<div id="contact">
  <a href="http://amazon.com/">
    <img src="http://i.imgur.com/GMldHhn.jpg" />
  </a>
</div>

Upvotes: 5

caldera.sac
caldera.sac

Reputation: 5088

the thing is you shoud give your expecting width and height of the image to your div, that holds your image.after that you should give the width and height for your img as width:100%, 'height:100%'.this is the full code for you.hope this will help.

<html xmlns="http://www.w3.org/1999/xhtml">
<head>

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Image</title>
<style>
  body{
    padding: 0;
    margin:0;
  }

  div#contact
  {
    width: 50%;
    height: 50%;
    
  }

  div#contact img{
    width: 100%;
    height: 100%;
    box-shadow: 1px 2px 1px black;
    margin: 2%;
  }

</style>
</head>

<body>
<div id="contact">
  <a href="http://amazon.com/">`
       <img src="http://i.imgur.com/GMldHhn.jpg" />
    </a>
</div>

</body>
</html>

Upvotes: 1

angel9215
angel9215

Reputation: 163

This is working for me:

#contact {
  height: 10%;
  width: 10%;
}

#img {
  width:100%;
}
<div id="contact">
  <a href="http://amazon.com/">`
       <img src="http://i.imgur.com/GMldHhn.jpg" id="img" />
    </a>
</div>

Upvotes: 0

user5792163
user5792163

Reputation:

There is nolength in CSS you use width that is probably your problem use this code:

#contact img {
   height: 50%;
   width: 50%;
}

Upvotes: 1

Related Questions