I have an image <img> in <td></td> tags, i want to set max fixed width, beacause when image is large, it goes out from layout and my table became to large. And if the image width is less then max width, it should have original size param.
How can i do that without javascript?
<table>
<tr>
<td>
<img>
</td>
</tr>
</table>
you can do it like this:
<img src="..." class="img" />
css:
.img {
max-width: 100px;
}
Related
If I have HTML like this:
<table>
<tr>
<td>
<img src="a.png">
</td>
<td>
<p>Sunday</p>
<p>Sunday</p>
<p>Sunday</p>
<p>Sunday</p>
<p>Sunday</p>
</td>
</tr>
</table>
The second column can have a variable number of paragraphs, so the height will be different. Whatever height the row is, I want the image to be that height. I tried this:
img {
height: 100%;
}
but it didn't seem to do anything. I would like to avoid changing the HTML if possible, can I do this with only CSS?
So the reason I wanted to increase the height of the image, was because the
second column can be much larger, which pushes the image way down with the
default table vertical centering. Instead of focusing on the image size, I
instead just moved the image to the top:
td {
vertical-align: top;
}
If someone has a solution to the original question I am still interested, but
this should do as a workaround.
I have a table that is of a responsive height and would like the image within it to fit the height of the td, but instead it overflows to the image source height, I have spent hours on this and no luck yet. The basic test case:
<table style='height:50%;width:50%;'>
<tr>
<td>
<img style='height:100%;' src='https://placehold.it/192x1200'>
</td>
</tr>
<tr>
<td>
bob
</td>
</tr>
</table>
use position relative to the parent of the image [ td ] and will apply your dimensions by precentage.
I have a table which has images in its cells. I want these images to shrink automatically when the window width is reduced. But they should not expand beyond their native size when there's extra space around.
I have a solution for this which works in Chrome, but it does not work in Firefox or Internet Explorer. On Firefox and Internet Explorer, images do not shrink when the window width is reduced, and instead a scroll appears.
How do I get it to work on all browsers ?
JSFiddle: http://jsfiddle.net/ahmadka/GeDxr/
CodePen (JSFiddle is down sometimes): http://codepen.io/anon/pen/JhsED
HTML:
<div class="imageTable">
<table>
<tbody>
<tr>
<td>
<img class="autoResizeImage" src="http://173.254.28.69/~bluraysp/web/images/footer/payment/normal/moneybookers.png" />
</td>
<td>
<img class="autoResizeImage" src="http://173.254.28.69/~bluraysp/web/images/footer/payment/normal/2checkout.png" />
</td>
<td>
<img class="autoResizeImage" src="http://173.254.28.69/~bluraysp/web/images/footer/payment/normal/visa.png" />
</td>
<td>
<img class="autoResizeImage" src="http://173.254.28.69/~bluraysp/web/images/footer/payment/normal/mastercard.png" />
</td>
</tr>
</tbody>
</table>
</div>
CSS:
.autoResizeImage {
max-width: 100%;
height: auto;
width: auto;
}
Change width:auto to width:100% does the trick.
Updated jsFiddle
Try changing the max-width to the largest or actual size of the image - 56px.
That will ensure that the image gets no larger. You might also add max-height.
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/
<table>
<tr>
<td>
<img src="/me/images/register.jpg" width="680" height="290">
</td>
</tr>
</table>
how can i show text and lables on this image?
Have your image as a background on either the td, tr or table. If image is not 100% height and width, use background-position to position your image where you want it. Then just use html as you would in the table.
Like this: http://jsfiddle.net/zPm2R/