Pikette O
Reputation: 25
How to make table with images fit the screen, regardless of screen size?
I created a table in that inside each td has a square image. I set the size of it manually, but my teacher wants it to be in a way that the images will get bigger if the screen is bigger so that it would fit the screen better. The screen should not be scrolled, the table must fit the screen size without any addition.
CSS is okay, I wanted to try using it but I don't really know from where even to start...
https://jsfiddle.net/8Lb1cuqh/1/
<td>
<img style="height:30px;width30px" src="https://processing.org/tutorials/pixels/imgs/tint1.jpg">
</td>
Upvotes: 1
Views: 99
Answers (2)
G-Cyrillus
Reputation: 106078
You may give a try to vmin value, so the table doesn't get bigger than the window (if i underrstood right), then reset the table-layout to fixed, so it desn't allow the table to grow wider than the width set. Finally, if image are really big and squared, then , max-width should do.
table {
table-layout:fixed;
width:90vmin;
}
img {
max-width:100%;
}<table align="center">
<tr>
<td>
<img src="https://processing.org/tutorials/pixels/imgs/tint1.jpg">
</td>
<td>
<img src="https://processing.org/tutorials/pixels/imgs/tint1.jpg">
</td>
<td>
<img src="https://processing.org/tutorials/pixels/imgs/tint1.jpg">
</td>
<td>
<img src="https://processing.org/tutorials/pixels/imgs/tint1.jpg">
</td>
<td>
<img src="https://processing.org/tutorials/pixels/imgs/tint1.jpg">
</td>
<td>
<img src="https://processing.org/tutorials/pixels/imgs/tint1.jpg">
</td>
<td>
<img src="https://processing.org/tutorials/pixels/imgs/tint1.jpg">
</td>
<td>
<img src="https://processing.org/tutorials/pixels/imgs/tint1.jpg">
</td>
</tr>
<tr>
<td>
<img src="https://processing.org/tutorials/pixels/imgs/tint1.jpg">
</td>
<td>
<img src="https://processing.org/tutorials/pixels/imgs/tint1.jpg">
</td>
<td>
<img src="https://processing.org/tutorials/pixels/imgs/tint1.jpg">
</td>
<td>
<img src="https://processing.org/tutorials/pixels/imgs/tint1.jpg">
</td>
<td>
<img src="https://processing.org/tutorials/pixels/imgs/tint1.jpg">
</td>
<td>
<img src="https://processing.org/tutorials/pixels/imgs/tint1.jpg">
</td>
<td>
<img src="https://processing.org/tutorials/pixels/imgs/tint1.jpg">
</td>
<td>
<img src="https://processing.org/tutorials/pixels/imgs/tint1.jpg">
</td>
</tr><tr>
<td>
<img src="https://processing.org/tutorials/pixels/imgs/tint1.jpg">
</td>
<td>
<img src="https://processing.org/tutorials/pixels/imgs/tint1.jpg">
</td>
<td>
<img src="https://processing.org/tutorials/pixels/imgs/tint1.jpg">
</td>
<td>
<img src="https://processing.org/tutorials/pixels/imgs/tint1.jpg">
</td>
<td>
<img src="https://processing.org/tutorials/pixels/imgs/tint1.jpg">
</td>
<td>
<img src="https://processing.org/tutorials/pixels/imgs/tint1.jpg">
</td>
<td>
<img src="https://processing.org/tutorials/pixels/imgs/tint1.jpg">
</td>
<td>
<img src="https://processing.org/tutorials/pixels/imgs/tint1.jpg">
</td>
</tr><tr>
<td>
<img src="https://processing.org/tutorials/pixels/imgs/tint1.jpg">
</td>
<td>
<img src="https://processing.org/tutorials/pixels/imgs/tint1.jpg">
</td>
<td>
<img src="https://processing.org/tutorials/pixels/imgs/tint1.jpg">
</td>
<td>
<img src="https://processing.org/tutorials/pixels/imgs/tint1.jpg">
</td>
<td>
<img src="https://processing.org/tutorials/pixels/imgs/tint1.jpg">
</td>
<td>
<img src="https://processing.org/tutorials/pixels/imgs/tint1.jpg">
</td>
<td>
<img src="https://processing.org/tutorials/pixels/imgs/tint1.jpg">
</td>
<td>
<img src="https://processing.org/tutorials/pixels/imgs/tint1.jpg">
</td>
</tr><tr>
<td>
<img src="https://processing.org/tutorials/pixels/imgs/tint1.jpg">
</td>
<td>
<img src="https://processing.org/tutorials/pixels/imgs/tint1.jpg">
</td>
<td>
<img src="https://processing.org/tutorials/pixels/imgs/tint1.jpg">
</td>
<td>
<img src="https://processing.org/tutorials/pixels/imgs/tint1.jpg">
</td>
<td>
<img src="https://processing.org/tutorials/pixels/imgs/tint1.jpg">
</td>
<td>
<img src="https://processing.org/tutorials/pixels/imgs/tint1.jpg">
</td>
<td>
<img src="https://processing.org/tutorials/pixels/imgs/tint1.jpg">
</td>
<td>
<img src="https://processing.org/tutorials/pixels/imgs/tint1.jpg">
</td>
</tr><tr>
<td>
<img src="https://processing.org/tutorials/pixels/imgs/tint1.jpg">
</td>
<td>
<img src="https://processing.org/tutorials/pixels/imgs/tint1.jpg">
</td>
<td>
<img src="https://processing.org/tutorials/pixels/imgs/tint1.jpg">
</td>
<td>
<img src="https://processing.org/tutorials/pixels/imgs/tint1.jpg">
</td>
<td>
<img src="https://processing.org/tutorials/pixels/imgs/tint1.jpg">
</td>
<td>
<img src="https://processing.org/tutorials/pixels/imgs/tint1.jpg">
</td>
<td>
<img src="https://processing.org/tutorials/pixels/imgs/tint1.jpg">
</td>
<td>
<img src="https://processing.org/tutorials/pixels/imgs/tint1.jpg">
</td>
</tr><tr>
<td>
<img src="https://processing.org/tutorials/pixels/imgs/tint1.jpg">
</td>
<td>
<img src="https://processing.org/tutorials/pixels/imgs/tint1.jpg">
</td>
<td>
<img src="https://processing.org/tutorials/pixels/imgs/tint1.jpg">
</td>
<td>
<img src="https://processing.org/tutorials/pixels/imgs/tint1.jpg">
</td>
<td>
<img src="https://processing.org/tutorials/pixels/imgs/tint1.jpg">
</td>
<td>
<img src="https://processing.org/tutorials/pixels/imgs/tint1.jpg">
</td>
<td>
<img src="https://processing.org/tutorials/pixels/imgs/tint1.jpg">
</td>
<td>
<img src="https://processing.org/tutorials/pixels/imgs/tint1.jpg">
</td>
</tr><tr>
<td>
<img src="https://processing.org/tutorials/pixels/imgs/tint1.jpg">
</td>
<td>
<img src="https://processing.org/tutorials/pixels/imgs/tint1.jpg">
</td>
<td>
<img src="https://processing.org/tutorials/pixels/imgs/tint1.jpg">
</td>
<td>
<img src="https://processing.org/tutorials/pixels/imgs/tint1.jpg">
</td>
<td>
<img src="https://processing.org/tutorials/pixels/imgs/tint1.jpg">
</td>
<td>
<img src="https://processing.org/tutorials/pixels/imgs/tint1.jpg">
</td>
<td>
<img src="https://processing.org/tutorials/pixels/imgs/tint1.jpg">
</td>
<td>
<img src="https://processing.org/tutorials/pixels/imgs/tint1.jpg">
</td>
</tr>
</table>If borders are collapse, then you can also do
body,
td {
margin: 0;
padding: 0;
}
table {
border-collapse: collapse;
table-layout: fixed;
width: 100vmin;
}
img {
display: block;
max-width: 100%;
}<table align="center">
<tr>
<td>
<img src="https://processing.org/tutorials/pixels/imgs/tint1.jpg">
</td>
<td>
<img src="https://processing.org/tutorials/pixels/imgs/tint1.jpg">
</td>
<td>
<img src="https://processing.org/tutorials/pixels/imgs/tint1.jpg">
</td>
<td>
<img src="https://processing.org/tutorials/pixels/imgs/tint1.jpg">
</td>
<td>
<img src="https://processing.org/tutorials/pixels/imgs/tint1.jpg">
</td>
<td>
<img src="https://processing.org/tutorials/pixels/imgs/tint1.jpg">
</td>
<td>
<img src="https://processing.org/tutorials/pixels/imgs/tint1.jpg">
</td>
<td>
<img src="https://processing.org/tutorials/pixels/imgs/tint1.jpg">
</td>
</tr>
<tr>
<td>
<img src="https://processing.org/tutorials/pixels/imgs/tint1.jpg">
</td>
<td>
<img src="https://processing.org/tutorials/pixels/imgs/tint1.jpg">
</td>
<td>
<img src="https://processing.org/tutorials/pixels/imgs/tint1.jpg">
</td>
<td>
<img src="https://processing.org/tutorials/pixels/imgs/tint1.jpg">
</td>
<td>
<img src="https://processing.org/tutorials/pixels/imgs/tint1.jpg">
</td>
<td>
<img src="https://processing.org/tutorials/pixels/imgs/tint1.jpg">
</td>
<td>
<img src="https://processing.org/tutorials/pixels/imgs/tint1.jpg">
</td>
<td>
<img src="https://processing.org/tutorials/pixels/imgs/tint1.jpg">
</td>
</tr>
<tr>
<td>
<img src="https://processing.org/tutorials/pixels/imgs/tint1.jpg">
</td>
<td>
<img src="https://processing.org/tutorials/pixels/imgs/tint1.jpg">
</td>
<td>
<img src="https://processing.org/tutorials/pixels/imgs/tint1.jpg">
</td>
<td>
<img src="https://processing.org/tutorials/pixels/imgs/tint1.jpg">
</td>
<td>
<img src="https://processing.org/tutorials/pixels/imgs/tint1.jpg">
</td>
<td>
<img src="https://processing.org/tutorials/pixels/imgs/tint1.jpg">
</td>
<td>
<img src="https://processing.org/tutorials/pixels/imgs/tint1.jpg">
</td>
<td>
<img src="https://processing.org/tutorials/pixels/imgs/tint1.jpg">
</td>
</tr>
<tr>
<td>
<img src="https://processing.org/tutorials/pixels/imgs/tint1.jpg">
</td>
<td>
<img src="https://processing.org/tutorials/pixels/imgs/tint1.jpg">
</td>
<td>
<img src="https://processing.org/tutorials/pixels/imgs/tint1.jpg">
</td>
<td>
<img src="https://processing.org/tutorials/pixels/imgs/tint1.jpg">
</td>
<td>
<img src="https://processing.org/tutorials/pixels/imgs/tint1.jpg">
</td>
<td>
<img src="https://processing.org/tutorials/pixels/imgs/tint1.jpg">
</td>
<td>
<img src="https://processing.org/tutorials/pixels/imgs/tint1.jpg">
</td>
<td>
<img src="https://processing.org/tutorials/pixels/imgs/tint1.jpg">
</td>
</tr>
<tr>
<td>
<img src="https://processing.org/tutorials/pixels/imgs/tint1.jpg">
</td>
<td>
<img src="https://processing.org/tutorials/pixels/imgs/tint1.jpg">
</td>
<td>
<img src="https://processing.org/tutorials/pixels/imgs/tint1.jpg">
</td>
<td>
<img src="https://processing.org/tutorials/pixels/imgs/tint1.jpg">
</td>
<td>
<img src="https://processing.org/tutorials/pixels/imgs/tint1.jpg">
</td>
<td>
<img src="https://processing.org/tutorials/pixels/imgs/tint1.jpg">
</td>
<td>
<img src="https://processing.org/tutorials/pixels/imgs/tint1.jpg">
</td>
<td>
<img src="https://processing.org/tutorials/pixels/imgs/tint1.jpg">
</td>
</tr>
<tr>
<td>
<img src="https://processing.org/tutorials/pixels/imgs/tint1.jpg">
</td>
<td>
<img src="https://processing.org/tutorials/pixels/imgs/tint1.jpg">
</td>
<td>
<img src="https://processing.org/tutorials/pixels/imgs/tint1.jpg">
</td>
<td>
<img src="https://processing.org/tutorials/pixels/imgs/tint1.jpg">
</td>
<td>
<img src="https://processing.org/tutorials/pixels/imgs/tint1.jpg">
</td>
<td>
<img src="https://processing.org/tutorials/pixels/imgs/tint1.jpg">
</td>
<td>
<img src="https://processing.org/tutorials/pixels/imgs/tint1.jpg">
</td>
<td>
<img src="https://processing.org/tutorials/pixels/imgs/tint1.jpg">
</td>
</tr>
<tr>
<td>
<img src="https://processing.org/tutorials/pixels/imgs/tint1.jpg">
</td>
<td>
<img src="https://processing.org/tutorials/pixels/imgs/tint1.jpg">
</td>
<td>
<img src="https://processing.org/tutorials/pixels/imgs/tint1.jpg">
</td>
<td>
<img src="https://processing.org/tutorials/pixels/imgs/tint1.jpg">
</td>
<td>
<img src="https://processing.org/tutorials/pixels/imgs/tint1.jpg">
</td>
<td>
<img src="https://processing.org/tutorials/pixels/imgs/tint1.jpg">
</td>
<td>
<img src="https://processing.org/tutorials/pixels/imgs/tint1.jpg">
</td>
<td>
<img src="https://processing.org/tutorials/pixels/imgs/tint1.jpg">
</td>
</tr>
<tr>
<td>
<img src="https://processing.org/tutorials/pixels/imgs/tint1.jpg">
</td>
<td>
<img src="https://processing.org/tutorials/pixels/imgs/tint1.jpg">
</td>
<td>
<img src="https://processing.org/tutorials/pixels/imgs/tint1.jpg">
</td>
<td>
<img src="https://processing.org/tutorials/pixels/imgs/tint1.jpg">
</td>
<td>
<img src="https://processing.org/tutorials/pixels/imgs/tint1.jpg">
</td>
<td>
<img src="https://processing.org/tutorials/pixels/imgs/tint1.jpg">
</td>
<td>
<img src="https://processing.org/tutorials/pixels/imgs/tint1.jpg">
</td>
<td>
<img src="https://processing.org/tutorials/pixels/imgs/tint1.jpg">
</td>
</tr>
</table>ressource that might be usefull:
https://web-design-weekly.com/2014/11/18/viewport-units-vw-vh-vmin-vmax/
https://developer.mozilla.org/en-US/docs/Web/CSS/table-layout
Upvotes: 0
jcubic
Reputation: 66660
You can use this CSS, but you can't hardcode height otherwise the image will be distorted, instead use min-height: or better min-width height will be calculated automatically to keep aspect ratio the same.
table {
width: 100%;
}
td img {
width: 100%;
height: auto; /* this is default */
}
Upvotes: 1
Related Questions
- How to make a table full of images stick to screen width in html
- Set table width when pictures are too big
- How to fix picture size in table
- How to make images fill table cells while keeping aspect ratio?
- How to fit HTML table images to window height?
- How to fit images into <td> keeping the exact size of <td>
- How to make images fit a TD without wrapping on different screen resolutions?
- Sizing large but not small images to fit on a html table
- image takes up whole table cell width and height in CSS
- Make table with images fill the whole page?