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.
Related
I have an image in an SSRS report, and it doesn't seem to be doing "FitProportional" (by which I assume means it will grow or shrink proportionally, depending on the cell size).
FitProportional keeps it small, proportional to the cell size.
Clip clips it to the cell size of the upper left corner of the photo.
Fit stretches the photo out of proportion
AutoSize skews the whole report to the size of a large photograph.
is there an additional setting I can apply to have the photo actually increase or shrink proportional to the cell size? Or should I make sure the photos are already sized properly, before being used by the SSRS report.
Thank you!
Not really an answer but too much to fit in a comment.
I'm not sure what other option you could want other centering, these cover everything else.
AutoSize : Resizes the cell to the size of the image's original size
Fit : stretches and scales the image to fit the cell perfectly, image ratio is no maintained and the image fills the cell.
FitProportial : keeps the image width vs height ratio the same but set the image size to be as wide or tall as possible to fill the cell either vertically or horizontally.
Clip : Anchors the image in the top left corner of the cell. The image is not resized but only the portion of the image that fits within the cell is visible.
If you still think there is something missing, maybe post some screen shots with examples of what you want to achieve.
So the subject is a bit lengthy. Anyway, what I'm basically doing is trying to get a unit be a specific height (366px to be exact), but I want that height to scale DOWN if the resolution drops, thus the "min-height: 366px" is naturally out because of that.
I did come up with a rather crummy solution where I inserted an image that's that height, but the image itself is 366 pixels tall and 100% transparent. That was the only way I could really get the container be the right height.
I need this height because the container will then contain more images within it that scale. These images are absolutely positioned within the container and are on top of my invisible image.
So is there any way to have a "min-width" that then scales as size goes down or am I out of luck?
Thanks a lot.
Em.... what about max-width 366px? that should work and.. did You use (it is probably not same as this)
I want to have a page with 3 (for example) images, placed horizontally and all having same width (though the actual image sizes may differ). They can change the image height according to the image ratio, no restriction on that.
So I am using a table with width = 100% [table width="100%"]. Inside that table, there is one row with three columns (td), each 33% [td style="width:33%;"]. Each table description has one image, width of which I have specified as [img src="{{MEDIA_URL}}a.jpg" 80% style="width:80%;"] to ensure that each image occupy 80% of the 1/3 of the screen width.
It is working fine with Mozilla, but in Chrome, when hitting refresh, images are becoming very very small, but while hitting enter over the browser url, it's working fine. Basically it's not taking the table width as 100%, which I can figure out by using border attribute.
Any suggestion?
Have you thought about using css to style the images instead of html?
Using the float property to align divs horizontally is fairly easy, and then you an apply percentages to each div and image, meaning it will re-size when ever the window size changes.
I'm building a Google Chrome extension and need to have a particular <div> tag resizable. This works, but it can only be resized to be larger than its original size, not smaller.
According to this question, this is set by the browser.
Are there any workarounds that allow the div to be made smaller?
AFAIK, there is currently no way to use a CSS resize attribute without a fixed minimum width unless you explicitly set that width.
If you wanted to resize a DIV that is currently 200px to 100px in height, you have to set the styles height to 100px to force the resize attribute to start resizing from there.
If I have an image combined with a style:
<img class="test" src="testimage.jpg" />
img.test { width: 50%;}
The image resizes to 50% the width of the box containing it, as well as resizing vertically, maintaining the aspect ratio.
This seems to require the enclosing DIV to be set to a particular width and height value. But if you want the enclosing DIV to resize automatically as the browser is dragged smaller or larger, wouldn't this be a problem?
I've clarified my answer to your original question. Go take a look and see if it clears things up. More or less, if you want the image to resize with the window you can't set the DIV to a fixed width and height. The DIV must have a % width and height also.
You'll need to manually specify the width and height properties to get the image to keep its dimensions. This wouldn't be too difficult if you're using server-side coding (PHP/ASP).
Another way to do it would be to use JavaScript to calculate and resize the image dynamically.
No, the image will still be 50% of the div, and if the div is a proportion of the page, that doesn't matter.
Its all proportions: The enclosing div might be 2/3 of the whole window, and the image will wil 1/2 of that. It all gets calculated before its displayed, just a bunch of number crunching. ;D