I was trying to make image table that fill window.
The following is my full source:
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>ready</title>
<style type="text/css">
html,
body {
min-width: 2048px;
height: 100%;
}
.player_buttons {
table-layout: fixed;
height: 100%;
width: 100%;
}
.playerimg img {
width: 100%;
height: 100%;
}
</style>
</head>
<body>
<table class="player_buttons">
<tr class="team" id="team_A">
<td class="playerimg">
<img src="../assets/profiles/1.jpg" />
</td>
<td class="playerimg">
<img src="../assets/profiles/2.png" />
</td>
<td class="playerimg">
<img src="../assets/profiles/3.jpg" />
</td>
</tr>
<tr class="team" id="team_B">
<td class="playerimg">
<img src="../assets/profiles/4.jpg" />
</td>
<td class="playerimg">
<img src="../assets/profiles/5.jpg" />
</td>
<td class="playerimg">
<img src="../assets/profiles/6.jpg" />
</td>
</tr>
</table>
</body>
</html>
It is work when the images are small enough,
But in the case of image has big size, table (=.player_buttons) ignore its height (it over body and HTML's height).
I think image keep its aspect and min-size is problem.
How can I adjust images to their cell size?
Thanks.
ADD.
.playerimg img {height: 500px;}
-> it works (but I don't want to set height to 500px)
.playerimg img {height: 10%;}
-> ignore height.
html,body {
margin:0px;
}
.player_buttons {
table-layout:fixed;
height:100vh;
width:100%;
margin:0px;
}
.playerimg {
height:50vh;
}
.playerimg img {
height:100%;
width:100%;
}
Since you want to fit your images within your browser window, vh is a good option. This code isn't responsive but I hope it is what you're looking for.
What i would like to suggest you is that dont take min-width of body as 2048px because it is spanning more area in some screens,instead you should use min-width as 100% as will fit perfectly in every screen also take max-width and max-height attribute in your img tag,in that way height of your image will not overflow.Just paste the following code inside your <style></style> tag instead of your code.
html, body {
min-width: 100%;
height: 100%;
}
.player_buttons {
table-layout: fixed;
height: 100%;
width: 100%;
}
.playerimg img {
max-width: 100%;
max-height: 100%;
}
I hope it helps.Comment for further query
Related
What I want is the image to be the same height of the td when the image isn't there, i.e. 300px, not the height of the image src. I can't specifiy the height of the image, td or table since the parent div represents the height of a responsive container. I've spent far too long on this and tried many things and for some reason the image always insists on being its full height.
<div style='height:300px;width:300px;'>
<table style='height:100%;width:100%;'>
<tr>
<td>
<img style='height:100%;width:100%;' src='https://placehold.it/1920x1200'>
</td>
</tr>
</table>
</div>
Try using CSS instead of inline styles. This helps keep your code more flexible. I've set the height and width to be auto and the max-height and max-width to be at 100% so that the image is contained inside the table cell, but also correctly scaled.
.table-container {
height: 300px;
width: 300px;
padding: 5px;
border: 1px solid red;
}
table td {
border: 1px solid blue;
padding: 0;
}
table td img {
display: block;
width: auto;
height: auto;
max-width: 100%;
max-height: 100%;
}
<div class='table-container'>
<table>
<tr>
<td>
<img src='https://placehold.it/1920x1200' />
</td>
</tr>
</table>
</div>
Try This, added "overflow: hidden;position: relative;" to parent and "position: absolute;" to child
<div style='height:300px;width:300px;'>
<table style='height:100%;width:100%; overflow: hidden;position: relative;'>
<tr>
<td style='position: absolute;'>
<img style='height:100%;width:100%;' src='https://placehold.it/1920x1200'>
</td>
</tr>
</table>
</div>
output screen
I have a div which is marked as display: table-cell. Inside this I have a table which isn't wide enough to fill the div, but I want it to. How do I do this?
<html>
<head>
<title>Test</title>
<style type="text/css">
#content {
padding: 10px;
background-color:red;
display: table-cell;
}
</style>
</head>
<body>
<div id="content">
<table width="100%">
<tr>
<td>BitOfText</td>
</tr>
</table>
</div>
</body>
</html>
jsFiddle at: http://jsfiddle.net/GrimRob/gL7aar9h/
It works fine when display: table-cell is commented out.
Set the body display to table, make it 100% wide. Use this CSS:
body {
display: table;
width: calc(100% - 16px); /* 8px margin either side */
}
JSFiddle: http://jsfiddle.net/gL7aar9h/1/
Alternatively:
body {
display: table;
width: 100%;
margin: 0;
}
JSFiddle: http://jsfiddle.net/gL7aar9h/2/
Source: Why is width: 100% not working on div {display: table-cell}?
table-cell value makes element behave as a <td>.
So you need a container with 100% width to make table-cell work properly in 100% width:
<div style="display: table; width: 100%;">
<div id="content">
<table width="100%">
<tr>
<td>BitOfText</td>
</tr>
</table>
</div>
</div>
Good Luck!
I have a table which overflows its containing div. I want to show all the contents in the table, so the table has to go over 100% width to do so. The problem is the containing div does not reflect the size of its child. I have an example here, it's a responsive page, but the problem only happens at low widths - at high widths it is fine.
<html>
<head>
<title>Test</title>
<style type="text/css">
body, table, td {
color : #1D1F22;
}
#content {
padding: 10px;
/*overflow: hidden; */
background-color:red;
}
.border {
background-color: #4385DB;
color : #4385DB;
}
table
{
word-break: break-all
}
#media(min-width: 800px) {
#content {
width : 98%;
}
}
</style>
</head>
<body>
<div id="content">
<table cellpadding="7" cellspacing="1" class="border">
<tr>
<td>VeryLongBitOfTextVeryLongBitOfText</td>
<td>VeryLongBitOfTextVeryLongBitOfText</td>
<td><img src="dogs.jpg" width="400" height="100" alt="trev"></td>
<td>VeryLongBitOfTextVeryLongBitOfText</td>
</tr>
</table>
</div>
</body>
</html>
js fiddle here: http://jsfiddle.net/GrimRob/qg75arbs/
You should consider using table-layout: fixed and some width on the table or cells.
Relevant CSS:
table {
table-layout: fixed;
min-width: 960px;
}
table-layout: fixed is the other table layout algorithm where browser stick to what the author (you) want and don't try anymore to adapt dimensions to the content. That works if you've some indication of width wanted, like a min-width: http://jsfiddle.net/qg75arbs/1/
A simple min-width on table without table-layout: fixed also works, depends on your requirement.
Removing table { word-break: break-all; } also works, seems strange to allow this while trying to have large cells.
Add this to your #content css if you want the table to push out the containing div.
display: table-cell;
<html>
<head>
<title>Test</title>
<style type="text/css">
body, table, td {
color : #1D1F22;
}
#content {
padding: 10px;
/*overflow: hidden; */
background-color:red;
}
.border {
background-color: #4385DB;
color : #4385DB;
}
table
{
word-break: break-all;
width:100%;
}
.img1 {
min-width:200px;
width:100%;
height:auto;
}
#media(min-width: 800px) {
#content {
width : 98%;
}
}
</style>
</head>
<body>
<div id="content">
<table cellpadding="7" cellspacing="1" class="border">
<tr>
<td>VeryLongBitOfTextVeryLongBitOfText</td>
<td>VeryLongBitOfTextVeryLongBitOfText</td>
<td><img src="dogs.jpg" class="img1" alt="trev"></td>
<td>VeryLongBitOfTextVeryLongBitOfText</td>
</tr>
</table>
</div>
</body>
</html>
I think the problem here is that the table will only shrink down to as small as the content (most of the time) and in this case you will note that each column has got to it's smallest size (1 character width), with a static width image.
In essence, the table element is not really responsive as much as you want and becomes static at a smaller size. You can scale the image or hide columns below a certain width but if you do use a table element it will always only shrink down to a certain size.
I have a image with dimension with dimensions 2350*180.
I am working on Phone gap. So,I need to give the code in a generic format so that it is applicable to any device.
Now, I have a background image for that big image.
style="background:url("img/bg.png") no-repeat fixed center top; width:100%; height:100%; "
this code works for few only.. Is there any mistake in my code?
another question, is when I scroll there is scroll bar thats visible. SO I added
style="overflow:hidden;"
<img src=""/> tag.
Am I correct or any other code should be added?
EDIT:
HTML
<body style="style="background:url("img/bg.png") no-repeat fixed center top; width:100%; height:100%;" class="body">
<div id="image" class="noSelect">
<table class="table">
<tr>
<td class="main">
<img src="http://www.rhpstudio.com/images/google_icon.png" alt="map" usemap="#map" style="overflow:hidden;" />
</td>
</tr>
</table>
</body>
I am taking about this background background:url("img/bg.png") in the code, and this image given here in is a sample one BUT its dimension is 2350*180.
EDIT:2-->entire code
HTML CODE:
<body style="background-image:url(img/bg.png);" class="body">
<div id="image" class="noSelect" style="height:100%;">
<table class="table">
<tr>
<td class="main">
<img src="img/list.png" alt="bloodtestmap" usemap="#bloodtestmap" class="noSelect" style="overflow:hidden;" />
</td>
</tr>
</table>
CSS CODE:
.body, .main_html
{
height: 100%;
margin: 0;
}
.body
{
overflow: hidden;
background-size: 100% 100%;
}
.table
{
width: 100%;
height: 100%;
text-align: center;
}
.main
{
max-width: 100%;
vertical-align: middle;
}
You can now set a background image to stretch to the edges of the container in various ways. If you don't mind the image distorting, you would do it like this:
background-size: 100% 100%;
Rather than this (which is broken)
style="style="background:url("img/bg.png") no-repeat fixed center top; width:100%; height:100%;"
try this in your style sheet:
body {
background-image:url("img/bg.png");
background-size: 100% 100%;
}
I have a site which should be suitable for mobile visitors, and therefore should scale to the dimensions of the user's screen, both in width and height. Furthermore, I have 2 navigation menus (1 left, 1 right), and some fixed info on the bottom (like a footer). All these parts contain images that should be scaled to fit into the menu's dimensions. Concretely, the page is something like (adding a random image that is too big by default):
<body>
<table class="wholepage">
<tr class="top">
<td class="left">
<table>
<tr><td><img src="http://apod.nasa.gov/apod/image/0304/bluemarble2k_big.jpg"/></td></tr>
<tr><td><img src="http://apod.nasa.gov/apod/image/0304/bluemarble2k_big.jpg"/></td></tr>
</table>
</td>
<td class="middle">Middle content</td>
<td class="right">
<table>
<tr><td><img src="http://apod.nasa.gov/apod/image/0304/bluemarble2k_big.jpg"/></td></tr>
<tr><td><img src="http://apod.nasa.gov/apod/image/0304/bluemarble2k_big.jpg"/></td></tr>
</table>
</td>
</tr>
<tr class="bottom">
<table>
<tr>
<td><img src="http://apod.nasa.gov/apod/image/0304/bluemarble2k_big.jpg"/></td>
<td><img src="http://apod.nasa.gov/apod/image/0304/bluemarble2k_big.jpg"/></td>
</tr>
</table>
</tr>
</table>
</body>
With the following CSS:
.wholepage {
width: 100%;
height: 100%;
}
.wholepage img {
width: 100%;
height: 100%;
}
.top {
height: 80%;
}
.left, .right {
width: 15%;
}
.middle {
width: 70%;
}
.bottom {
height: 20%;
}
Like that, the width of the page adapts itself perfectly, sticking to the 15%-70%-15% distribution between left-middle-right. However, vertically, all the images refuse to scale. How can I get the page to fit to the 80%-20% distribution for top-bottom?
EDIT: Here's a way to see it, if you fill this in in http://www.w3schools.com/css/tryit.asp?filename=trycss_default
<html>
<head>
<style type="text/css">
html, body {
height: 100%;
}
.wholepage {
width: 100%;
height: 100%;
}
.wholepage img {
width: 100%;
}
.top {
height: 80%;
}
.left, .right {
width: 15%;
}
.left {
position: fixed;
top: 0px;
left: 0px;
}
.right {
position: fixed;
top: 0px;
right: 0px;
}
.middle {
width: 70%;
margin-left: auto;
margin-right: auto;
}
.bottom {
height: 20%;
position: fixed;
bottom: 0px;
}
</style>
</head>
<body>
<div class="wholepage">
<div class="top">
<div class="left">
<table>
<tr><td><img src="http://apod.nasa.gov/apod/image/0304/bluemarble2k_big.jpg" /></td></tr>
<tr><td><img src="http://apod.nasa.gov/apod/image/0304/bluemarble2k_big.jpg" /></td></tr>
</table>
</div>
<div class="middle">Middle content</div>
<div class="right">
<table>
<tr><td><img src="http://apod.nasa.gov/apod/image/0304/bluemarble2k_big.jpg" /></td></tr>
<tr><td><img src="http://apod.nasa.gov/apod/image/0304/bluemarble2k_big.jpg" /></td></tr>
</table>
</div>
</div>
<div class="bottom">
<table>
<tr>
<td><img src="http://apod.nasa.gov/apod/image/0304/bluemarble2k_big.jpg"/></td>
<td><img src="http://apod.nasa.gov/apod/image/0304/bluemarble2k_big.jpg"/></td>
</tr>
</table>
</div>
</div>
</body>
Thanks!
Don't use width & height, just use max-width:
.wholepage img {
max-width: 100%;
}
IE < 8 scales images poorly and to get good quality scaling you need to use AlphaImageLoader with the SizingMethod set to scale. Probably the easiest way to do that is with Drew Diller's DD_BelatedPNG library. Be aware there are performance implications to using the AlphaImageLoader. Also, IE6 doesn't support max-width so use width: 100% in a conditional comment if you need to support IE6.
Also, I can say enough about Ethan Marcotte's A List Apart Article on Responsive Design (which is an excerpt from also excellent his book.)
First; don't use tables for styling. Use divs, or even better the html5 tags like <header> and <footer> and such.
To ensure correct handling of height with percentages, you should set html and body to 100% height as well, like:
html, body { height: 100%; }
I ended up hacking it. Unless someone knows a better way, here's what I did:
function fixHorizontalDimension(){
maxHeight = window.innerHeight * [% height desired] * 0.9;
imgs = document.getElementsByClassName([classname of wrongly sized objects]);
for(i=0; i<imgs.length; i++){
imgs[i].style.height = maxHeight;
}
}
Since the site is only to be used personally, and using a mobile browser, this fix does the job. Resizing (e.g. switching from portrait to landscape) doesn't work though.