The slider images that I use is not the same width and height as the NivoSlider div.
I want my images to scale into the exact width and height of the NivoSlider div, with no losing any part of the image. How can i do this?
I am using the v3.2 JQuery plugin, not Wordpress.
You could do this in photoshop, but its hard if its not the same ratio, you will lose pixels
what you could do is resize the slider or edit the photo's
Related
I have a canvas whose height and width attributes are not mentioned during creation. I update the height and width of it through javascript so that it always fills the viewport height and width. When I use a jpg for the canvas background, it works fine. But when I use a svg, I find that it gets clipped to the default canvas dimension ( 300px x 150px ). But if I set the height and width of the canvas as attributes directly in the tag, then the svg fills the entire canvas properly. Why does SVG behave this way and how can I fix i?
I have my my FabricJS canvas inside a container with a fixed height/width in pixels. On the side I have a dropdown to change the canvas size to various presets. What I would like to do is automatically zoom out whenever I select a size that is either taller and/or wider than the container. So for example, if my container div is 800x600 and I select a canvas size of 1024x768, I want to zoom out so that the entire canvas is still visible. Conversely, I'd like to zoom in up to 100% if I select a smaller size (e.g. 200x200).
I found this example of zooming, but no matter how much you zoom out, the canvas size appears to stay the same. See screenshot:
How can I accomplish this?
As you can see here, the area with the thin red border is the canvas container. The white box is the canvas.
You can use the canvas.setDimensions function to accomplish this. You pass two arguments to it; the first is an object specifying the height and width to change the canvas to and the second indicates whether to change the css, the actual size of the canvas, or both.
For example,canvas.setDimensions({width: 750, height: 750}, {backstoreOnly: true} will set the actual size of the canvas to be 750x750, regardless of the display.
canvas.setDimensions({width: '750px', height: '750px'}, {cssOnly: true}) will set the display size of the canvas to be 750x750, regardless of the actual size.
I'm not 100% sure whether the width or height require a px after it for css or for backstore, but that's a pretty simple thing to check. Also, if no argument is passed for the second parameter, it will change both.
I'm using several libraries to generate SVG images in-browser, which can be bounced off the server through svgexport to generate PNGs or JPEGs at user-specified resolutions. (This works as expected.)
I'd like to offer the user the option of downloading the SVG that gets fed into the conversion, with the resolution used to set the width and height attributes. When I do that, the viewbox is not scaled to the specified width and height, but is padded so that the image occupies the original size area in the upper left.
While looking for solutions, I found images in the W3C documentation that illustrate the problem. If you open these images in Chrome and use the inspector to change the width and height properties,
ViewBox.svg will expand to fill the width and height (linked from here)
PreserveAspectRatio.svg will be padded to stay in the upper left (linked from here)
This does not appear related the presence or value of thepreserveAspectRatio property, or the nesting of svg tags. My files are rendered as padded rather than scaled in Chrome/Chromium, Firefox, Safari/WebKit, Opera, Inkscape, and Gapplin.
How do I ensure that my SVG is scaled rather than padded to fill the width and height?
The viewbox is not scaled when it's entered as viewbox rather than viewBox; svg attribute names are case sensitive.
The second link does not have a viewBox attribute, and adding a viewbox (lowercase) attribute has no effect.
I have a figure in restructured text using a scale directive as follows:
.. figure:: images/my_image.svg
:scale: 150 %
The the image is perfectly OK in the HTML output of sphinx, except that it is not scaled. (The svg image has width and height information and a viewBox)
It is strange, that in contrast to png figures, the <img> tag in the HTML file does not contain width and height attributes of the image (hm, can't sphinx determine width and height of the svg for some reason?).
What is the reason for this? Does sphinx support the :scale: directive for svg figures?
You may try setting the width. This can also be assigned a percentage of the current line width as value.
.. figure:: images/my_image.svg
:width: 100%
Am using Highslide with liquid layout. How can I change code to have popup size to a percentage of browser window?
You can’t use percentage for the size of a Highslide popup.
A regular Highslide image popup will show the image in its full size,
but the image will shrink to fit the viewport if the image is larger
than the viewport and allowSizeReduction is true (default
setting).
If useBox is true, you need a fixed width and height
(in px) for the image area.
HTML popups needs a fixed width. Default width is 400px.