i've got a table 3x3 with Images in it. I want the table to scale with the windows width and height.
scaleing with the width is not a problem and working so far, but i don't get it working with the height. The aim is to see the whole table with no gaps between the images. Also the table should stop growing if the images are at 100% so no forced 100%.
is this possible in CSS only?
thanks for your help
that is what i got so far:
<head>
<style>
* { margin: 0;padding: 0; line-height: 0;}
html, body
{
height: 100%;
}
#imgHolder {
max-width:100%;
max-height:100%;
height: auto;
width:auto;
border-collapse: collapse;
}
img {
width: 100%;
}
</style>
</head>
<body>
<table id="imgHolder">
<tr>
<td><img src="https://www.lionkeen.net/assets/img/cat.jpg" /></td><td><img src="https://www.lionkeen.net/assets/img/cat.jpg" /></td><td><img src="https://www.lionkeen.net/assets/img/cat.jpg" /></td>
</tr>
<tr>
<td><img src="https://www.lionkeen.net/assets/img/cat.jpg" /></td><td><img src="https://www.lionkeen.net/assets/img/cat.jpg" /></td><td><img src="https://www.lionkeen.net/assets/img/cat.jpg" /></td>
</tr>
<tr>
<td><img src="https://www.lionkeen.net/assets/img/cat.jpg" /></td><td><img src="https://www.lionkeen.net/assets/img/cat.jpg" /></td><td><img src="https://www.lionkeen.net/assets/img/cat.jpg" /></td>
</tr>
</table>
</body>
here is a fiddle: https://jsfiddle.net/xhaqzzkj/
To do window height, use viewport height vh, such as 100vh or 98vh:
https://developer.mozilla.org/en-US/docs/Web/CSS/length
https://web-design-weekly.com/2014/11/18/viewport-units-vw-vh-vmin-vmax/
and use calc() with it, such as calc(100vh - 16px), assuming you are using a modern browser.
Since you also have this requirement:
Also the table should stop growing if the images are at 100% so no forced 100%
Do you mean if the images are not that big, don't force them to become big just to make the table 100% of viewport width and height?
If so it seems like you can have a table that contains these images, but have a max-width and max-height as 100vw and 100vh, respectively.
Or you can make the td and images have max-width: 33vw and max-height: 33vh like the following samples: https://jsfiddle.net/xhaqzzkj/7 and https://jsfiddle.net/xhaqzzkj/8
Related
This is my first post here, sorry if my formatting sucks.
Trying to assemble image slices together inside a to create the effect of a full size image. FF and edge both display the image correctly however chrome appears to be generating different heights despite all images in the row having the same height (they do have different widths). The problem only occurs when giving the table a set width (and shrinking the image size to fit within the table )
Ive tried changing .img to height:100% but that just changes the height to the full length of the original image warping it. Ive also tryed making height 100% with no luck
please note that the image pieces all have different heights per row and different widths per column do hardcoding is not possible
<style>
tr,
td,
table,
img,
tbody {
padding: 0;
}
table {
border-spacing: 0;
width: 300px;
}
img {
display: block;
width: 100%;
}
</style>
</head>
<body>
<table>
<tr>
<td><img src="https://i.imgur.com/OfAxJus.jpg"></td>
<td><img src="https://i.imgur.com/N1bcNYU.jpg"></td>
<td><img src="https://i.imgur.com/qCkFcIW.jpg"></td>
<td><img src="https://i.imgur.com/xqBG6zQ.jpg"></td>
</tr>
<tr>
<td><img src="https://i.imgur.com/bddCcSn.jpg"></td>
<td><img src="https://i.imgur.com/7ySyHqq.jpg"></td>
<td><img src="https://i.imgur.com/ulHRT4Q.jpg"></td>
<td><img src="https://i.imgur.com/reU0Gyr.jpg"></td>
</tr>
<tr>
<td><img src="https://i.imgur.com/rBsFVNI.jpg"></td>
<td><img src="https://i.imgur.com/ikub1e4.jpg"></td>
<td><img src="https://i.imgur.com/0RVlEWg.jpgg"></td>
<td><img src="https://i.imgur.com/v22RK32.jpg"></td>
</tr>
<tr>
<td><img src="https://i.imgur.com/1nLECe5.jpg"></td>
<td><img src="https://i.imgur.com/R9hI0ka.jpg"></td>
<td><img src="https://i.imgur.com/Bs8pQEY.jpg"></td>
<td><img src="https://i.imgur.com/ndLkcTb.jpg"></td>
</tr>
</table>
What can i do to make it so chrome doesnt generate the different heights?
i am new to designing html pages..i have searched for answer through the day.. but no luck.. i have problem in fixing my html page height fit to the browser . i am developing web page with the help of apache tiles for page layout. so in my layout i will have header , body and footer. below is my tiles layout jsp
<body>
<table width="100%" height="100%" align="center">
<tr height="20%">
<td><tiles:insertAttribute name="header" /></td>
</tr>
<tr height="60%">
<tiles:insertAttribute name="menu" ignore="true" />
<td align="left">
<tiles:insertAttribute name="body" />
</td>
</tr>
<tr height="20%">
<td><tiles:insertAttribute name="footer" /></td>
</tr>
</table>
</body>
and i have css defined for body and table as follows
body {
background-color: #f0f0f0;
width: 100%;
height: 100%;
margin: 0%;
padding: 0%;
}
table {
table-layout: fixed;
overflow: auto;
}
i want to design my pages with percentage and i dont want to use pixels for scaling issues on different screen resolution.
when i load the page.. the table height shrinks with respect to the body page content size.. for e.g - if i have body page size of two line. then my footer moves up (looks weird) . i would like to fix header, body and footer with 20 % 60% and 20% respectively, and this should be fixed.
Thanks in advance
Consider the following code. How can I implement the table in a responsive manner such that on a large screen the table height and width is equal to the sum if the images (e.g. 600x600) and on a smaller screen such as a mobile device the table shrinks the images proportionally. For example, on an iPhone where the screen width is 320 pixels I want the table to scale down to 320x320 while preserving the image aspect ratio.
<HTML>
<head></head>
<body>
<div id="header"></div>
<div id="table"
<table style="height: 100%">
<tr>
<td>
<img id="topleft" src="300x300.png">
</td>
<td>
<img id="topright" src="300x300.png">
</td>
</tr>
<tr>
<td>
<img id="bottomleft" src="300x300.png">
</td>
<td>
<img id="bottomright" src="300x300.png">
</td>
</tr>
</table>
</div>
<div id="footer"></div>
</body>
</html>
Here's an image showing how the above code renders in a mobile Safari browser.
You can set table width to 100% and td and img widths to rougly 49% (to keep the border) if you have 2 images per row. Additionally, if you might have images smaller than the possible screen size, use something like img {max-width: 49%;}
Adaptive table dimension can be tricky. First thing I would recommend is to put table inside of a div with attribute as position: relative and then control your margins and size this way.
<div id="myCont" style="">
<table>
<tr>
<td> Hello! </td>
<td> Aloha! </td>
</tr>
<tr>
<td> Goodbye! </td>
<td> Aloha! </td>
</tr>
</table>
</div>
Then some css:
#myCont {
position: relative;
width: 100%;
}
#myCont table {
width: 100%;
}
#myCont table tr td {
width: 50%;
position: relative;
}
.imgCls {
width: 100%;
}
If you then set table to <table cellspacing="0" cellpadding="0">, you're going to have a lot easier time getting the accurate dimensions and a "clear slate" to start with.
Also, img tags will ALWAYS respect the aspect ratio if you only set the width attribute.
For this, I might recommend a jQuery solution.
<img class="imgCls" src="/path/to/img.png" />
<script type="text/javascript">
$(document).ready(function(){
var imgw = $('.imgCls').parent('td').css('width');
$('.imgCls').css('width',imgw);
});
</script>
Something like this should work as long as the images with the imgCls class are (or desired to be) uniform in width, the var imgw will take the width of the first .imgCls it finds.
I suggest you to try with this css code:
img{ width: 49%; }
http://jsfiddle.net/xeSLA/
I want my table to be with width of 80% of the screen.
The table has one row and 4 columns.
each cell contains one image.
The problem is that the pictures are too big -
I want that their width will be determined by the table width evenly
(each cell will get 20% of the screen)
and such that each picture height will be determined by its width..
How can I do that?
This provides a simple, elegant and fully responsive solution:
HTML:
<table border="1px solid black" width="80%">
<tbody>
<tr>
<td><img src="https://www.cia.gov/library/publications/the-world-factbook/graphics/flags/large/uk-lgflag.gif" width="100%"></td>
<td><img src="https://www.cia.gov/library/publications/the-world-factbook/graphics/flags/large/uk-lgflag.gif" width="100%"></td>
<td><img src="https://www.cia.gov/library/publications/the-world-factbook/graphics/flags/large/uk-lgflag.gif" width="100%"></td>
<td><img src="https://www.cia.gov/library/publications/the-world-factbook/graphics/flags/large/uk-lgflag.gif" width="100%"></td>
</tr>
</tbody>
</table>
See this jsFiddle example
Similarly, see this CSS solution using
td img {
width: 100%
}
Do something like this:
table { width:80%; }
td { width:25%; }
td img {
width:100%;
height:auto;
}
The width on the image needs to be inheritted from something, so make sure you put some kind of width on the TD. The browser should be able to calculate it since it's a table, but if for some reason you changed to a list markup or something else, you would need a defined width.
I'm having a bit of an issue getting some stylesheet behavior that I want. I'm not even sure if it's possible. Basically I'm attempting to place a table with a variable number of cells with static cell width in a DIV with overflow: auto, and my goal is that when the tables width extends past the width of the container DIV that it becomes scrollable.
This isn't the case. The cells get shrunk together. A very basic representation (with inline styles for ease on this; not actually in the application haha) of the code:
<div style="width: 1000px; overflow-x: auto;">
<table>
<tr>
<td style="width:400px;">
This
</td>
<td style="width:400px;">
Should
</td>
<td style="width:400px;">
Scroll!
</td>
</tr>
</table>
</div>
Is there anyway I can do this with CSS, or am I going to have to go back to setting the width inline on a second div containing the table through calculations?
Works if you set the width on the table itself.
<table style="width:1200px;">
The td will always shrink to the necessary size, they won't push the table wider in that situation.
using CSS can done like below but make sure you use id or class for applying css if you have more then one table or div.
<style>
div { width: 400px; overflow-x: auto; }
table { width:1200px; }
table td { width:400px; }
</style>
<div>
<table>
<tr>
<td>
This
</td>
<td>
Should
</td>
<td>
Scroll!
</td>
</tr>
</table>
</div>
This should help
<table style="width: max-content;">