HTML Help

[Guest]

I am currently coding a website for a school project. I have 3 images in a table (1 cell each) and the table stretches to 100% of the page. How do I get it so that the images will always stretch to 1/3 of the table (while still maintaining aspect ratio)

[Guest]

Here's the website I'm sort of using at the moment: http://agra-culture.com/

Down the bottom, I want my pictures to be like those three (size wise)

[spwath]

I wouldent use a table, tables are nooot good for responsiveness. Use divs.

[GoodBytes]

Post your code.

But you can set the width and height of an image to a percentage.

 

[Guest]

4 minutes ago, spwath said:

I wouldent use a table, tables are nooot good for responsiveness. Use divs.

I know, that's exactly what the other teacher told me, but tables are 10 times easier than padding and stuff like that

[Guest]

4 minutes ago, GoodBytes said:

Post your code.

But you can set the width and height of an image to a percentage.

 

yes, but it doesnt maintain aspect ratio

[Guest]

5 minutes ago, GoodBytes said:

Post your code.

But you can set the width and height of an image to a percentage.

 

my code looks a little something like this:

 

<table width="100%" align="center">
  <tr>
    <td><img src="picture1.png"></td>
    <td><img src="picture2.png"></td>
    <td><img src="picture3.png"></td>
  </tr>
</table>

 

[KuJoe]

Something like this?

<div style="width:33%;float:left;border:1px solid black;"><img src="image1.ext"></div>
<div style="width:34%;float:left;border:1px solid black;"><img src="image2.ext"></div>
<div style="width:33%;float:left;border:1px solid black;"><img src="image3.ext"></div>

 

[Guest]

3 minutes ago, KuJoe said:

Something like this?

<div style="width:33%;float:left;border:1px solid black;"><img src="image1.ext"></div>
<div style="width:33%;float:left;border:1px solid black;"><img src="image2.ext"></div>
<div style="width:33%;float:left;border:1px solid black;"><img src="image3.ext"></div>

 

would that work?...let me try

[Guest]

4 minutes ago, KuJoe said:

Something like this?

<div style="width:33%;float:left;border:1px solid black;"><img src="image1.ext"></div>
<div style="width:33%;float:left;border:1px solid black;"><img src="image2.ext"></div>
<div style="width:33%;float:left;border:1px solid black;"><img src="image3.ext"></div>

 

Just keep in mind that I'll use divs within the table cells....just easier to keep things neater

[KuJoe]

1 minute ago, jkeasley said:

would that work?...let me try

I just tried it on jsfiddle.net and it works. It's just something I threw together so you can shorten it if you want to do classes or ids for the DIVs.

[KuJoe]

1 minute ago, jkeasley said:

Just keep in mind that I'll use divs within the table cells....just easier to keep things neater

Then ignore my code, it will probably look bad in a table and even worse on smaller screens.

[Guest]

4 minutes ago, KuJoe said:

I just tried it on jsfiddle.net and it works. It's just something I threw together so you can shorten it if you want to do classes or ids for the DIVs.

nah...didnt work. Defaulted back to 1920x1080

[Guest]

4 minutes ago, KuJoe said:

Then ignore my code, it will probably look bad in a table and even worse on smaller screens.

I'll try your code on the table though

[Guest]

5 minutes ago, KuJoe said:

Then ignore my code, it will probably look bad in a table and even worse on smaller screens.

That didn't work on the table either...now they're really small

[KuJoe]

Just ignore my code completely if you're planning on using tables, my code will only work if you're just looking at displaying 3 images next to each other with each one equal of width (except you can't divide 100 by 3 equally so one of them will be 34% while the other 2 are 33%).

[Guest]

9 minutes ago, KuJoe said:

Then ignore my code, it will probably look bad in a table and even worse on smaller screens.

HAHAHAHAHAHAHA...IT WORKED!!. I set the width of the cell to 33%, then the width of the pictures to 100%

[Guest]

6 minutes ago, KuJoe said:

Just ignore my code completely if you're planning on using tables, my code will only work if you're just looking at displaying 3 images next to each other with each one equal of width (except you can't divide 100 by 3 equally so one of them will be 34% while the other 2 are 33%).

Here's what I used:

 

<table width="100%" align="center">
	<tr>
		<td width="33%"><img src="whateveryouwant.jpg" width="100%"></td>
		<td width="33%"><img src="whateveryouwant.jpg" width="100%"></td>
		<td width="33%"><img src="whateveryouwant.jpg" width="100%"></td>
	</tr>
</table>