My team is developing an application that requires a few SVGs to be true scale regardless of screen size. We are now manually scaling the SVGs to true scale while we figure out a logic to maintain the scale automatically. When doing the changes manually, I found that only the Canvas of the SVG changes when the Height and Width of the SVG in the database are changed. When I increase the dimensions, the canvas expands, and the SVG just repositions itself to fit within the canvas; when I reduce the dimensions, the SVGs shrink to fit within the canvas. How do I resize the SVGs as well along with canvas?
Related
I have an image similar to this one
And I'd like to insert a video in it and keep its ratio when reducing the size of my screen.
Only the width needs to be responsive as it'll be shown in portrait on mobile.
I have no idea how to do that using CSS. I tried using an absolute position and some percentages, but when resizing, the ratios are not really respected and the video becomes smaller
If you can use the open source HTML5 video player, videoJS, it support a 'Fluid' mode which will allow you set a chosen aspect ratio to be maintained when the video resizes.
They provide details including configuration here: https://docs.videojs.com/tutorial-layout.html
An example configuration:
var player = videojs('vid2');
//Set fluid mode
player.fluid(true);
//Set aspect ratio - 1:1 is square in this example
player.aspectRatio('1:1');
//Set UI to be responsive
player.responsive(true);
I have a strange requirement with an electron application where I need to be able to force the document to render at a specific resolution and then stretch or squash it to fit the window. For example, I need to specify that the content size is 1920x1080 but then need to squash that down to an actual window size of say 1280x960.
I have tried to implement this in the DOM by setting a fixed body size and scaling this down to fit the window but this has a knock on effect on other transforms and animations which expect the non-scaled version. I need a solution which works outside the DOM so the document behaves as if it actually is running in a 1920x1080 window but then the rendered result is scaled up or down to fit the actual size of the window.
Is there any way to achieve this?
I don't think it's possible to set the native resolution of the window but maybe you can use the HTML viewport meta header. or use BrowserWindow setAspectRatio. or use webFrame.setZoomFactor(2) from electron api
Whan I run a test page in google PageSpeed.
I found a few warnings like for example serve scaled images..
http://man-vimal.net78.net/introduction/?intro/action=main
THe results were as such :
The following images are resized in HTML or CSS. Serving scaled images could save 449.3KiB (99% reduction).
http://man-vimal.net78.net/.../twitter-logo.png is resized in HTML or CSS from 367x367 to 20x20. Serving a scaled image could save 140.9KiB (99% reduction).
http://man-vimal.net78.net/introduction/views/images/fb.png is resized in HTML or CSS from 1,692x1,692 to 20x20. Serving a scaled image could save 115.9KiB (99% reduction).
http://man-vimal.net78.net/.../linkedin.jpg is resized in HTML or CSS from 1,024x768 to 20x20. Serving a scaled image could save 99.6KiB (99% reduction).
http://man-vimal.net78.net/.../panorama.jpg is resized in HTML or CSS from 604x453 to 100x100. Serving a scaled image could save 81KiB (96% reduction).
http://man-vimal.net78.net/.../googleplus.jpg is resized in HTML or CSS from 450x320 to 20x20. Serving a scaled image could save 12KiB (99% reduction).
What is a scaled image and how can I fix this up ??
A scaled image is an image that has been scaled to match the size that it is displayed.
http://man-vimal.net78.net/.../twitter-logo.png is resized in HTML or CSS from 367x367 to 20x20. Serving a scaled image could save 140.9KiB (99% reduction).
This is telling you that the your source image is 367x367 but you are displaying it at 20x20.
It is inefficient because the browser has to download the larger image and then rescale it. The 367x367 image is 140kb larger than a 20x20 image would be.
To fix this, resize the image (in photoshop, preview, etc. ) so that is 20x20 and serve that one instead of the image you are currently serving.
your images are too big. just resize them. you can even use paint to do that. a scaled image is basically a resized image.
The typical situation is that, say you have an image with a width of 400px, but it doesn't fit in your layout, so you go to your style sheet and write:
img {
width: 300px;
}
Here, you've resized the image with CSS. But you're still serving the image at a 400px size and scaling the image down.
The implication here is that, rather than using the 400px image, you should use the image sized the way you need it because the file size will be smaller, and thus the page will load faster.
For example, if a user of a website uploads an image of size 400px x 400px and you use this image as a thumbnail say 40px x 40px using html/css.
The web browser has to download the larger image and compute it to the smaller size. The best way to solve this problem is to make a distinct copy of the image, say 'when the user uploads the image' and then use it directly.
So the web browser does not have to inefficiently scale down the image.
I hope this helps.
A Scaled Image is an image whose size matches exactly with the size defined in CSS or HTML.
If your original image called twitter-logo.png is of lets say 300 x 250 dimension but the dimension defined in the HTML statement is:
<img src="http://man-vimal.net78.net/.../twitter-logo.png" width="600" height="500">
then the browser will first download the original image (which has a dimension of 300 x 250) and will then resize it to match the dimensions defined in the HTML statement. i.e. 600 x 500
This resizing of images in the HTML or CSS slows down the overall page rendering considerably and should be avoided.
To resize images (and to optimize them losslessly) you can use a free software called RIOT (available only for Windows).
If I have an image that is 600x600 and I want to display it in 100x100 on a mobile device.
Should I resize the image 1st in Photoshop or should I just use width/height attributes (will this method force users to download a large image 1st and then resize it ?).
I know it is possible to resize using JS
The browser can resize images dynamically using CSS, but they doesn't always look as good as doing it in Photoshop. You should resize it for mobile to reduce the file size and bandwidth required.
The image of the card on my site (bottom right) displays differently in Chrome and Firefox. In Chrome, its ratio is preserved, but the ratio is twisted in Firefox.
How can I apply a constant resize of the image itself, cross-browsers (basically do what now happens for Chrome)
You've got the following in your image tag:
width="100%" height="40%"
Try specifying just one of those (I would suggest the width) to maintain the aspect ratio, otherwise the image will be stretched or squished one way or another to fit those dimensions on the less thoughtful browsers.
Ideally you want to avoid allowing the browser to resize the image. Different browsers achieve varying levels of quality which never compare to what you can achieve with a dedicated digital image editor (Photoshop, Paint.NET, etc). Best to resize it to the desired dimensions before publishing then explicitly set the actual height and width in pixels.