Reputation: 35
This is my first question and first website ever, a total beginner so I hope I'm doing it right :) I made a table with pictures. I added height and width to each, like this:
<td>
<img src="numbers.jpg" title="Numbers" width="300" height="300">
</td>
It worked, but then I tried to delete the sizes and use my external CSS file instead. So i changed it to:
<td>
<img class="topics" src="numbers.jpg" title="Numbers">
</td>
And then added in the css file:
.topics {width: 300px;
height: 300px;}
It didn't work, and the pictures are now showing with the original size of the picture file itself. I also tried adding the class to the "td" part instead of the "img", that one didn't work either.
What am I doing wrong?
After being able to do this, with your answers I hope, I'd like another tip for adjusting the pictures to mobile version as well. I tried using percentage (%) and it didn't work. So any insights on that will be great :)
Upvotes: 3
Views: 32
Reputation: 350
.topics {
height:300px;
width:300px;
}
<head>
<link href="style.css" type="text/css" rel="stylesheet">
</head>
<td>
<img class="topics" src="numbers.jpg" title="Numbers">
</td>
Thanks! I've just noticed that I forgot the px, indeed. Sadly, it still doesn't work. I know the link to the stylesheet is ok since it works on other elements, like the headlines. I'm trying to figure out what else I am missing here...
Upvotes: 0
Reputation: 2738
You forgot to say px in the stylings to specify its 300 pixels
.topics {
width: 300px;
height: 300px;
}
Upvotes: 1