CODEWITHSUNDEEP
htmlcssimageclasshtml-table
Lirani
Lirani

Reputation: 35

Size of pictures in a table using css

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

Answers (2)

hypern00b
hypern00b

Reputation: 350

  1. Add "px" to your pixel attribute
  2. Be sure to link to your external stylesheet

.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

J Livengood
J Livengood

Reputation: 2738

You forgot to say px in the stylings to specify its 300 pixels

.topics {
  width: 300px;
  height: 300px;
}

Upvotes: 1

Related Questions