A.Jaasma A.Jaasma - 3 years ago 147
HTML Question

images won't resize in style or in the img itself

I have been stuck with this problem for almost two days already, I am a quite new programmer, and it's probably quite easy to solve..

I have to make a small game with images and words, but the images won't resize. Before they would just resize in however I wanted them, but now they won't even move an ince..

I am sure that the stylesheet is linked correctly because everyting else works just fine..

This is my code, can someone figure out how to solve this?
I already looked for answers everywhere but nothing fits the right creteria..



body, html {
margin-left: 10%;
margin-right: 10%;
padding: 0px;
height: 100%;
font-family: georgia, "Comic Sans MS";
background-color: #f0f0f0;
}

header {
border-bottom: thick solid grey;
}

footer {
border-top: thick solid grey;
}
.points {
float: right;
}

.plaatje {
width: 100px;
height: 100px;
}
.plaatje2 {
float: left;
width: 25%;
}
.igen {
font-size: 25px;
font-weight: bold;
}
.sprint {
float: right;

}
.copyright {
position: relative;
bottom: 20px;
left: 65px;
font-size: 10px;
}

.img {
background-color: red;
width: 25%;
height: 100px;
}

<!DOCTYPE html>
<html>

<head>
<meta charset="utf-8">
<title>Words</title>

<link rel="stylesheet" href="css/style.css" media="screen" title="no title" charset="utf-8">
<link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.4.0/css/font-awesome.min.css">
<script>
</script>
</head>
<body>

<header>
<span class="fa fa-refresh" style="font-size:25px;"></span><span class="igen">&nbsp;igen</span>
<span class="points"><i class="fa fa-thumbs-o-up" style="font-size:24px"></i>Rigtige: &nbsp;&nbsp;&nbsp; 0 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <i class="fa fa-thumbs-o-down" style="font-size:24px"></i>Forkerte: &nbsp;&nbsp;&nbsp; 0</span>
</header>

<div class="container">
<div class="img">
<img src="img/cat.jpg" alt="cat" />
</div>
<div class="img">
<img src="img/beak.jpg" alt="beak" />
</div>
<div class="img">
<img src="img/spoon.jpg" alt="spoon" />
</div>
<div class="img">
<img src="img/milk.jpg" alt="milk" />
</div>
</div>


<footer>
<img class="dansk" id="dansk" src="img/dansk2.jpg" alt="dansk" />
<img class="sprint" id="sprint" src="img/sprint2.png" alt="sprint" />
<center><span class="copyright"> &copy;2013 laerdansk / FC-Sprint&sup2; Leerbedrijf bronnen </span></center>
</footer>

</body>
</html>




Answer Source
 <div class="img">
    <img src="img/spoon.jpg" alt="spoon" />
  </div>

is wrong...

it should be:

 <div>
    <img class="img" src="img/spoon.jpg" alt="spoon" />
  </div>

that way your css will target the actual image and give it a size...

.img {
  background-color: red;
  width: 25%;
  height: 100px;
}
Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download