If that’s the case, why don’t you put in your own class ?
<table class="mytable">
<tr>
<td><img src="img1.gif" /></td>
<td><img src="img2.gif" /></td>
</tr>
</table>
and in stylesheet
.mytable td img { width: 100%; height: auto; }
Thanks, I’ve just tried this! It’s weird, because it worked for 3 images (out of 12). What am I doing wrong?
Edit: Even weirder stuff is happening, as I reload the page, sometimes only two images would be big enough, sometimes other ones are too small, it seems to vary all the time. How can this be?
Edit #2: I’ve tried to put the class on the image instead of the table this time, same effect. Could it be that WordPress is preventing to have too many big images somehow? I’m pretty sure I’ve seen settings like this somewhere.
Without a live link to the site, I could only assume there are some mis-matched closing tags or could be some CSS syntax errors.
Markups validator
http://validator.w3.org/
CSS validator
http://jigsaw.w3.org/css-validator/
Well, the site is on localhost, so I can’t send you a link sadly, neither I can test the validator.
Here are both pieces of code:
<table>
<tr>
<td><a href="bilder/1000.jpg" rel="lightbox[roadtrip]"><img src="bilder/miniaturen/1000.jpg" class="gallerie-bilder" /></a></td>
<td><a href="bilder/1001.jpg" rel="lightbox[roadtrip]"><img src="bilder/miniaturen/1001.jpg" class="gallerie-bilder" /></a></td>
<td><a href="bilder/1002.jpg" rel="lightbox[roadtrip]"><img src="bilder/miniaturen/1002.jpg" class="gallerie-bilder" /></a></td>
<td><a href="bilder/1003.jpg" rel="lightbox[roadtrip]"><img src="bilder/miniaturen/1003.jpg" class="gallerie-bilder" /></a></td>
<td><a href="bilder/1004.jpg" rel="lightbox[roadtrip]"><img src="bilder/miniaturen/1004.jpg" class="gallerie-bilder" /></a></td>
<td><a href="bilder/1005.jpg" rel="lightbox[roadtrip]"><img src="bilder/miniaturen/1005.jpg" class="gallerie-bilder" /></a></td>
<td><a href="bilder/1006.jpg" rel="lightbox[roadtrip]"><img src="bilder/miniaturen/1006.jpg" class="gallerie-bilder" /></a></td>
<td><a href="bilder/1007.jpg" rel="lightbox[roadtrip]"><img src="bilder/miniaturen/1007.jpg" class="gallerie-bilder" /></a></td>
<td><a href="bilder/1008.jpg" rel="lightbox[roadtrip]"><img src="bilder/miniaturen/1008.jpg" class="gallerie-bilder" /></a></td>
<td><a href="bilder/1009.jpg" rel="lightbox[roadtrip]"><img src="bilder/miniaturen/1009.jpg" class="gallerie-bilder" /></a></td>
<td><a href="bilder/1010.jpg" rel="lightbox[roadtrip]"><img src="bilder/miniaturen/1010.jpg" class="gallerie-bilder" /></a></td>
<td><a href="bilder/1011.jpg" rel="lightbox[roadtrip]"><img src="bilder/miniaturen/1011.jpg" class="gallerie-bilder" /></a></td>
</tr>
</table>
.gallerie-bilder {
width: 100%;
height: auto;
}
This was the second try. When I tried it the slightly other way (by having the class on the table, and not the images), it did exactly the same.
Just so you know both of the validators also accept direct pasting or file upload. It’s important that the markup and CSS are “okay”, then if not already yet, use one of these tools to inspect the image in the table.
Firebug
http://getfirebug.com
Firefox: Inspect Element
https://developer.mozilla.org/en-US/docs/Tools/Page_Inspector
Chrome: developer tools
https://developers.google.com/chrome-developer-tools
I don’t think it’s necessary to validate any files, look at the code(s) above, nothing’s wrong there. And that’s the only thing I changed!
I don’t think it’s necessary to validate any files
what are the validation results?
what theme are you using?
They are obviously positive. Have you checked the code snippet above? 😉 You can’t do much wrong.
I am using a child theme of the 2012 theme. It doesn’t have much differences. I have the stylesheet copied for example with the code snippet posted above in there.
Andrew Nevins
(@anevins)
WCLDN 2018 Contributor | Volunteer support
Well, the site is on localhost, so I can’t send you a link sadly
Then replicate the issue some other way; through a sandbox service like CSSDesk.com.
Have you checked the code snippet above? 😉 You can’t do much wrong.
I think Alchymyth was referring to your files, rather than the little snippet of HTML you posted.
Thanks, I believe I found the solution.
I had around 11 images all in one <tr> and it seems like WordPress squeezes / resizes them to make them all fit on one line. width: 100% and height: auto were a part of the problem here. I removed this and set the size of the images. I then split the amount of pictures that would fit into the width of the site into <tr>’s and it’s all working fine now. Thanks!
