I currently have a div in my home page, serving as the first section of it. It has a background-image which is a SVG file.
What I'd like, is for the background to not move vertically when scaling it. Have it with fixed height, but scale horizontally.
Currently, I can get it to have 2 different behaviours, neither the one I want.
The first gif is closest to what I want, giving the svg element a height attribute and using preserveAspectRatio=none, but then the circles inside don't preserve their aspect ratio.
The second example could also work, but if the svg were clipped to the bottom of the div instead of the top. But I don't know how to make it scale "upwards" instead of downwards.
Related
I want to use PNG (or SVG) background-image (background-fit : 'contain') and then dynamically change node border (based on data). Everything works except one thing: node border is rendered "centered" around the node, so half of the line is outside the node's dimensions and half is inside the node. This clips the background image (see nodes.jpg below).
nodes.jpg
As a workaround I tried to use 'background-width' and 'background-height' (set to 60%) to create something like padding in CSS but this changes the aspect ratio of the background image (it stretched the image) which I don't want.
Is there a way how to achieve the desired result with the current CSS styles in Cytoscape.js (I'm using CY 2.7.11)?
That's the way a stroke works in a canvas. Unless browsers add new API to control stroke position (inside, outside, on/mid), there's no performant way to have outer borders.
Set a padding to enlarge the outer width/height of the node without affecting its inner width/height (used for bg img sizing): http://js.cytoscape.org/#style/node-body
Just set a padding to half the border width or greater.
I have written a fairly basic javascript function that when an image is clicked on a full sized version appears in the foreground.
The image is set with max-width and max-height numbers in a CSS file such that it leaves some space around the outside and it preserves it's own proportions.
The problem is that if the image happens to not be large, or the screen of the users device has a very high pixel density then the 'larger' image might not be any larger.
Is there a way I can keep proportions, not exceed say 90% on either side, but set the largest dimension to be 90%.
The closest similar method I have found is the fill option for backgrounds.
Cheers
Set the width and height of the image to a relative value like 100% - (margin + border + padding) so that it will be stretched regardless of its actual dimensions.
Using max-width and max-height is a nice way to restrain your image from growing beyond specific proporitions, but leaves room for the image to decide what size it wants to be within those bounds. You say you do not want this, thus set width and height as well.
You can embed that image in div tag and apply css property width:100% to image and on click of image increase the width of div proportionately as per the resolution. In this scenario image with less width than parent div gets adjusted as per width of parent div.
Is the background-position css property used to indicated where in the element should the image be displayed (like this) or what part of the image should be displayed (like when using sprites) ?
In my instance i have a div of let's say 300px width, i want the image to be shown in the right part of that element so normally i just added a center right to my background declaration, though now my image is a spirit so how can i control the coordinate of the image that i want to display ?
Seems to me that this background property act in 2 different way.. Am i missing something ?
If the place where you want to put element of the sprite is larger then the element then you need to put white space (trasnparent) around it. And you can't use keywords like center, you need to use pixels, because you will center whole sprite and not your element.
Using sprites is like using window where background is larger then background image so you need to position the window (actually you position the background).
If your container is larger than the background sprite image part you want to display then the other part of image will also be displayed. Better use Sprite cow to generate sprite it will give you the css for different parts of sprite image
http://www.spritecow.com/
I'm trying to create a page with a long strip of images, where the height of the strip is set to a percentage of the height of the browser window, and the images are scaled to 100% of the height of the strip. I also want to be able to overlay text on top of the images. I've got as far as this:
http://jsfiddle.net/bX8Cb/
But it doesn't behave as expected. The div.news-item elements should shrink to fit the contained img elements. This happens in Chrome/Safari, but when the window is resized the .news-item elements retain their original width rather than adjusting it to fit the resized images. (But if I then inspect the element in the Chrome developer tools it redraws the divs as desired.)
In Firefox the .news-item elements are given the full width of the un-resized image, although the image itself is resized.
What's happening here? Am I doing something wrong or is it a browser bug or something? I've been looking at the CSS specification for the width property and it seems like what I've done ought to work.
I am trying to resize an image using only CSS, the problem is I don't know it's dimensions.
What I have tried so far is putting the into a and then making the image have 105% width. The idea was that the containing div would have no size other than it's contents, but this is only make the image the size of the next ancestor that does have an explicit size.
In order to resize something in CSS you have to either give it an exact pixel value or base the size on something else.
If you were to set an image to have a width of 105% of its container then that container must have some width for you to use. If it's a regular div with no styling applied then its width will be the full width of that divs parent and your img will be 105% of that.
If the div holding the img is floated then it will be getting its width from its contents (aka the img). This won't work because you can't have two elements getting their widths from each other. One of them has to be constrained somehow.