I am trying to get an SVG I wrote / drew to scale as the viewport changes, it's the reason I chose sVG as the format for the image.
However, it doesn't seem to be scaling at all.
I did all that my research told me to, added width, height and some attributes to the SVG element and added a div container-parent; and, then added max-height / width and height / width : 100% in CSS to that.
Any idea why this SVG is not scaling and how I can get it to scale?
Here is a live example of the page in question : https://dl.dropbox.com/u/270523/inlineSVG.html
The CSS on #bookmark state: width: 100%; max-width: 106px; this means that the svg will never scale unless the window is less that 106px wide (which most/all browsers do not allow).
It is difficult to discern exactly what you want to achieve, but if you state width: 10% you will observe the SVG is indeed scaling according to the browser width.
Related
Suppose I have an image sized originally 1280x720(ratio ~ 1.78), but for some reason I added the image as 1000x720(ratio ~ 1.39). The code should look like below
<img src="example.JPG" style="height:720px; width:1000px;">
(Edit : And the code above can't be changed. Actually in the first question I said 'I added', but actually the html source is from WYSIWYG editor. Also, the author(user, as it is WYSIWYG editor) wants to add up the image size 1000x720 or proportional to it(ratio ~ 1.39) even though it can make ugly image)
And, to resize the image proportionally when the screen width is smaller than 1000px, I set the max-width as 100%, and height as auto using css:
img {
height: auto;
max-width: 100%;
}
Then, the 'auto' option for height is ignored, and image isn't resized proportionally. If I override 'auto' option for height using keyword 'important', then the image is resized, but as ratio 1.78(proportional to 1280x720), not 1.39(proportional to 1000x720, and it's what I want to do).
Is there any solution for this using pure css? (AND without calculating ratio by hand, as the given example is only for 1000x720 but I can't expect what size would I get from the user in real service. Maybe they can insert image size as 500x720 even though its real size is 1280x720.)
I have a div that is set to 100% the height of my window, and a max-width of 66% of the window's width. html and body are set to 100% and overflow:none, so there's no scrolling permitted/possible.
I want to be able to scale an arbitrary <img> to fill as much as the space as possible. I'd prefer not to use background images, due to existing JS code that interacts with the <img> element.
This seems like an obvious starting point:
<img style="height:100%;max-width:66%">
But the max-width seems to come from a percentage of the browser's HEIGHT, rather than its width. And it won't keep its aspect ratio, which is definitely an undesired effect!
I could use JS to accomplish this task, but would prefer a CSS solution if there is one? It seems like it should be simple, but I have a feeling it's not...
If the img is within the div, then it's using 66% of the width of the div, which is already 66% of the width of body if I understand correctly. You can also make images resize automatically and maintain their aspect ration by setting img {width: auto; max-width: 100%;} within your CSS, leaving the height unchanged.
When setting percentage-based widths on an element, the width is typically calculated based on the width of the element's parent, which is why your image may have looked smaller than you expected.
I found an answer that I like over here:
https://stackoverflow.com/a/26648877/1058739
Quoted in case his answer disappears:
Here's a hackish solution I discovered:
#image {
max-width: 10%;
max-height: 10%;
transform: scale(10);
}
This will enlarge the image tenfold, but restrict it to 10% of its final size - thus bounding it to the container.
Perfect for my needs, I think.
Here's the problem, in brief:
We have a responsive layout which scales our images depending on the screen width. For narrow / small screens we adjust to a two column layout; for wider screens or landscape tablets we can comfortably show four columns. All pretty standard.
The images are defined to be 100% of the width of containing element, and have a height of auto. This works fine in all browsers from IE7+.
The problem is that on page load the browser has no idea what height to expect the images to be. Thus there's a lot of reflow/redrawing as each image is loaded. In fact they're mostly square, but there's no way to hint to the browser the ratio of any of them. Because we serve a lot of images, this causes the page rendering to slow down. On a device with lower processing power, e.g. old iPhone, I'm guessing it gobbles up a lot of unnecessary CPU too.
A possible javascript solution would be to inject a rule into the css based on the page size; this will probably involve the entire page being redrawn though. It's not ideal.
My question is: is there an elegant solution at hinting at the aspect ratio of an image, thus allowing the page 'shape' to be more-or-less correct before image load, when using responsive (percentage-width-scaled) images.
Demonstration page here: http://www.partyark.co.uk/christmas-presents.html - try resizing the screen to see the images shrinking/growing. Min size is 145px, max 200px.
There's a pure CSS technique first described by Thierry Koblentz. It's based on a wrapper with position: relative, zero height, and padding-bottom with a percentage size. The percentages of paddings apply to the width of the containing block, so you can achieve arbitrary aspect ratios with fluid layouts. Then you can put your image inside this wrapper, absolutely positioned, with 100% width and height. Example for 4:3 aspect ratio:
.wrapper-with-intrinsic-ratio {
position: relative;
padding-bottom: 75%; /* results in 4:3 aspect ratio */
height: 0;
}
.element-to-stretch {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
My problem is more or less identical to this question, but with the slight difference that I need to vertically resize it.
What I mean is; according to the information supplied in the article I linked to, the DIV will resize while keeping the aspect ratio if you stretch/contract the browser width, but not if you make the browser window taller/shorter (ie, its height) - I wonder if it's possible to make this work in a CSS-only environment.
TYIA.
If you are dealing with just an image, then setting its width to 100% and removing its height will keep its aspect rate, but obviously will also degrade its quality at great stretchings.
Like this:
img {
width: 100%;
height: auto;
}
No, this isn't possible.
The closest thing that is possible is described in the answer to this question: Make an element's width relative to its height?
...however, that requires introducing an img tag into the source.
I am trying to create a completely fluid layout in CSS (everything in %), which would work seamlessly across platforms (desktop/mobile/tablets like iPad).
With Fluid Layouts, can an image be made completely fluid? For example:
img { max-width:100%; }
Does this mean it will adjust/fit to any extent or window size?
Also can this be applied to background images as well ?
Does this property have any limitations in terms of browser implementation or anything ?
The snippet you provide says that the maximum width for the image is 100%. This could mean no wider than the browser window or device viewport. It could also mean no wider than a relatively postitioned parent node. But, if the window is big enough, the image will render at it's native size.
It can't be applied to background images, because the background image itself is tiled or positioned based on it's original size. The max-width trick is mostly useful for content images, not so much layout or styling images.
It is limited, in that IE6 doesn't support it at all. However, that market is rather small and shrinking, so maybe you can ignore that issue.
Your code means the size of the image relative to it's parent's width. So lets say the div that the image is in is 500px wide, then the image may be a maximum of 500px wide, or smaller, not larger. for more info on max-width: W3.org max-width
For backgrounds this works a little different, you can use background-size: x y; for this. It's CSS3 and is not supported by older browsers. for more info on background-size: W3.org background-size