I have created an email flyer and it generate the products by pulling images from a server based on the pasrt code I input. The problem is that some images are bigger than others so I want to created table cells with a set height e.g. 100px x 100px but when the image is pulled into the cell, it over rides it and appears bigger than it should be.
I've tried setting either the height or the width so it doesn't get too big but some are wider than others so even though the height fits nice, the width then pushes the cell wider.
Is there no way to tell the image to fill as much of the cell as possible without expanding when it gets to the cells max size?
It's quite difficult to post the exact code I am using but if you just create a table with height="100" and insert an image larger than the cell it will ignore the cell height.
I can't set manual heights to images as I am using one table and it multiplies if I add more products.
So basically want I want to do is set the table cell let's say to a height of 100px and a width of 150px and whatever the size the image "hits" first, it stops getting bigger
For your image add one class apply it like below. I hope you have assigned the width and height for your table cells.
.imgclass
{
max-width:100%;
max-height:100%;
}
Related
Using VisualEditor on last version of mediawiki, I am trying to create table with image in it.
The columns width automatically fit to the image size, excepte for small images. Even for a 25pixel image, the column minimum size is 200 pixel
I have tried all th parameters for the image. I do not change the width of the column. If I remove the image, the column immediately fit to minimum size.
What can I do to make column fit to small image?
Another solution would be to not use image. I would like "green check" and "red cross" in my tab? Maybe there is a solution without using images? Any ideas?
I was learning how to create a table to display searchable data in a list using HTML. I have it split into two columns and want the elements to scale to the screen size. If possible, I wanted to have the width of the element divide the webpage's width in half and have their height scale to the width making the element into a square. What I currently have scaled the width, but my fix overlaps the two columns and creates a few other issues. I also could not figure out how to have the ratio of the height: width is 1:1. Here is the modified w3school code I am working with:
https://www.w3schools.com/code/tryit.asp?filename=FZRZ717W4LB3.
Here is my solution with a bit more trying if anyone else has a similar desire for this layout: https://www.w3schools.com/code/tryit.asp?filename=FZS3SPUN6GOH.
I'm new to CSS and gave up trying to make my table working - would like to ask for some help.
What I need to do is to display a table occupying 100% of screen width (single row, for example), containing 24 columns (cells). Each cell contains a value of random length. Because of each value is too wide, cell is being extended to display the value (fit the length), and total width of the table exceeds 100% of screen width. I need each cell to occupy 1/24 of screen width and hide characters which does not fit cell width. Of course this should work for resizing this table.
Any ideas how to implement this? I tried playing with
overflow: hidden
but it didn't help much.
Thanks in advance!
Fixed layout
table{
width:100%;
table-layout:fixed;
}
and to hide the data which overflows
td{
overflow:hidden;
}
if you want all table cells same width, apply following property to table
{table-layout: fixed;}
This property is support by almost all browsers. so, you shouldn't worry about it.
here is the issue I'm running into.
I have a 100% width table that is the grid of a map.
The grid is made of several columns and lines. Every cell hosts an image.
Every image of a column has the same width. And every image of a raw has the same height.
So far, so good...
Everything works like a charm on a desktop.
But on mobile it gets complicated: my cells seem not to have the same height.
For example: all my images of the 1st raw have a 868px height, but there is a padding on some cells (which is different depending the cell).
I added a yellow and green background on the raws that point out this unexpected padding.
Here is the test URL where you can see the problem on mobile: http://jcdecaux.atalanta.fr/plan.php
If anyone can help me... that would be nice.
Thanks in advance!
And if you precise the images dimensions with the width and height tags?
If it doesn't work better try to define their with css and the !important attribute.
style="width: 100px!important; height: 100px!important;"
Otherwise, why do you not using a single image ? you could map it.
I think similar questions have been answered, but none really seem to have helped me out that much.
I have a table that is set to width="100%" with a cell on the top row.
This cell contains an image which is fairly wide.
When I resize the window, and therefore the table, the image does not resize below 100% of its original size.
Is there a way to get this image to reduce in size as the table shrinks?
Set image width to 100% as well.
If this doesn't help set it to auto!
#img{width:100%;}
or
#img{width:auto;}
If you want it to actually get smaller than the specified width/height (or the original width/height) of the image, you need to do some scripting. This means you can hook up the resize event of the browser and reset the width/height of the image equally while resizing.
Another option is to wrap the image in a div with an overflow:hidden specified. So if the div gets to large for the window, it will hide the pieces of the image that fall outside the window.