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?
Related
I am designing a site that sells apps. Each product page contains text with screenshots. I'm having trouble controlling the size and behavior of the images.
Each screenshot is a different size and shape - some being tall and narrow while others being short and wide.
My question:
How am I supposed to control the size of these images? Some are perfect at 100%, but some others would be way too big at 100%. So if I set a value in the css, it will be ok for image 1,3,6,9 but not for images 2,4,6,8 (and obvioulsy there are more than 2 types of sizes...).
I tried using max-width, but that obviously failed because if one picture exceeds the max-width, it will be scaled down, while another will not - this produces a funny looking page!
Am I supposed to do local styling for each image in such a case?
And if the answer is that local styling is required here, does that mean that each page needs it's own media queries also to resize responsively?
Thanks.
You can make 5 css class, named .width1 to .width5, having width value from 20% to 100%.
When adding an new image, choose a class that fit your need.
If you need more precision, create a set of 10 class instead of 5 !
Edit : as promised, the code :
.size1{width:10%;}
.size2{width:20%;}
.size3{width:30%;}
.size4{width:40%;}
.size5{width:50%;}
.size6{width:60%;}
.size7{width:70%;}
.size8{width:80%;}
.size9{width:90%;}
.size10{width:100%;}
So the image :
<img class="size2" src="..." />
will be 20% wide.
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%;
}
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.
I'm attempting to make a 2x2 grid with each cell 300x300px. Each cell has an image, which fades in and out, reloaded using AJAX ( jQuery to be precise) - creating a 4 image gallery over ajax.
All images are simply dumped into a folder, so there is no defined height or width of them.
Is there any way by which I can have the fill the space? eg, a portrait shaped image would resize to height=300, while its width might be smaller... and similarly for a landscape image ( width=300 with smaller height)? I'm trying to eliminate any resizing of the cells, because it is rather horrible to watch.
I"ll leave centering these vertically and horizontally till later.
Thanks for any help!
UPDATE:
I've pastebin'ed the current code
http://pastebin.com/Hz4fJk9p
Use max-height:300px; and max-width:300px;, assuming your image is not smaller than 300px in both dimensions to begin with.
Even if it's not CSS, I've found some interesting libraries for doing image resizing to fit the container:
http://plugins.jquery.com/project/myimgscale
http://code.google.com/p/jquery-imagefit-plugin/
I had a page that displayed some text and a centered table below that text. I added another table adjacent to the first table. The font size remained the same on screen, but in print the font size got reduced.
This is probably so that two tables could fit one besides another. Problem is in the fact that font size got reduced on the entire page, even outside the tables (which is undesired). Does anyone know the cause for this behavior, and how can I keep the declared font size outside the tables (it is explicitly declared but in print it has no effect).
Original answer by user #celicni
It seems that font size did not decrease but the whole page was scaled to fit the paper size. So explicitly setting the outer text to larger size couldn't help, but setting the table text to smaller size helped by reducing the page width hence no need for scaling.