I need to position an image in the bottom-right corner of my composition without manual adjustment, such that the image remains perfectly in the corner regardless of its size.
Using an Image and an Anchor patch I can position the image such that the image center is at the bottom right. Close, but no cigar.
The Anchor patch has width and height inputs, that would server the purpose, however I see no means of getting these data from a simple image patch.
You need to tell the Anchor Position the Image's size.
Create an Input Splitter of type Number. Name it Width.
Connect Width to the Anchor Position's Width and the Billboard's Width.
Getting the Image's Height is a bit trickier since it is determined by the Width / Aspect Ratio. Create an Image Dimensions Patch and a Math Patch with the operator to division (via double click or the inspector).
Connect the Width to the first input of the Math Patch and connect the Image Dimension's Aspect Ratio to the second input of a Math Patch.
Connect this output, which is the Height, to the Height input of the Anchor Position Patch.
Related
I want to make a carousel-style widget that is built with 3 images and two buttons.
My problem is that this whole thing needs to be responsive and scale up (to some maximum) and down, while keeping the relations between the images.
The shape is as follows:
The pixel sizes of the images are all known upfront, and any relation that is needed can be known upfront (e.g. the amount needed to move the green and blue boxes since they are not vertically centered).
I am not very experienced with HTML/CSS, and I managed to get this shape with flexboxes and translations, but I could never manage to get it to scale correctly with the rest of the page.
I don't quite understand if this is even possible with CSS, since it requires some sort of absolute positioning / translations / etc. that ruin its box model.
The next thing I thought of trying is to use a canvas instead and draw the images myself, while letting the canvas width to stretch as it wills (up to a maximum) while I control the height in JS, since I know the aspect ratio of the widget.
I would really prefer a simpler HTML/CSS solution though.
I suppose I could do the same without a canvas - a container that is controlled by CSS for width, but I control its height, and the images/buttons could all be absolutely positioned in it, but that's kinda weird as well.
Your goal can be accomplished by using percentage-based width values (heights being auto or unset) for the images at different CSS breakpoints (e.g. Bootstrap's listed at https://getbootstrap.com/docs/5.0/layout/breakpoints/). Practically from an aesthetic standpoint, I suggest setting buttons to pixel values (again, differing at breakpoints). Either a container (like a div element) or the body element will be the parent element to which your images and buttons scale.
To accomplish overlapping of images (and horizontal alignment of buttons mentioned in the next paragraph), for all elements you'll need to set z-index, which indeed does require either absolute or fixed positioning. Given your elements will be either absolute or fixed in position, you could modify vertical positioning using the top property.
Give the three images auto left/right margins. Set the buttons to the same z-index as the green image so that they'll rest against the green image. Give the L button a left margin of auto and right margin of 0. Give the R button a left margin of 0 and right margin of auto.
No JS required with this solution, as you'd prefer.
I am building a website on Cargocollective.
I want to change the baseline to top of the image gallery. (Now based on baseline)
When I watch the source through Google inspector, I can find the code right this
but I can't find that css code in cargocollective CSS editing window,
and I don't know how I can approach to that.
help me!
and I want to know make image full to the square. (to be no blank in the square, even if the image is cut off somewhat)
How can I ?
You're using flexbox, wich means items are at the center of the height, if you want to change the baseline you would have to change the height of a row.
Or you could use flex start / flex end to set all images top or bottom
and I want to know make image full to the square
For this you want to research things like cover or contain
src (https://www.w3schools.com/css/css3_object-fit.asp)
Make the widht and height like 200px x 200px and make the child as the background. then use cover/contain
I have a div (suppose 30px width and 30px height) and i am using a sprite image for all the images ,now there is one image in the sprite at background-position : -12px -1467px (just an example)
whose width and height is 70px and i want to apply this image as background to given div.
The problem is how to scale that image to fit in the div size.
This should not break if i increase or decrease the div size based on resolution.
My sprite's width and height can be changed (more images can be added later in the sprite).
This question may be duplicate as few people suggested but i am not able to understand those question properly.
I have created a fiddle for this.
In the fiddle 2nd div shows the original sprite,and in the first div i want to show only first image but when i resize the div the first image should resize with div (like if i am using an individual image instead of a sprite).
One way to do this to have first div equal to first image and then on resize use something like transform:scale(.5) ,but i don't want to use that.
Set background-sizeto whatever % you need to fill the div
I have a problem regarding relative positioning. I want the body to have a background color of say, blue. Initially the page should be just of height 100% (that may vary from computer to laptop, of course, hence I can't specify a fixed height in pixels), thus the entire page should appear blue. In the middle of the page is an element, that has been set to that position by relative positioning (it can't be absolute, can it, in order to expand with its content). The element can expand vertically. If the height exceeds the boundary of the page, the page also should expand, the background of the expanded portion being still blue.
Now how do I achieve this? The only solution I can think of is to use relative positioning for the background element (which is blue and should remain blue on expansion). But for that, I must set it to the available height (relatively positioned elements cannot be assigned height through percentage value, so that rules out height: 100%). But the height itself will vary depending on the browser, viewport size, etc (and I can't use Javascript!). So how do I do this?
Is the height of the element in the middle known?
You might want to take a look at this http://css-tricks.com/centering-in-the-unknown/
A live demo that might help http://jsfiddle.net/thebabydino/7N4Xx/
The JavaScript is just for changing the height of the div in the middle.
I would like to place a canvas on top of an image that I have on a page. The canvas will be the exact dimensions of the image.
However, the following conditions must be met:
The canvas must remain exactly on top of the image at all times. Therefore, using absolute positioning will not work because if content is inserted above the image, it will move the image down without moving the canvas.
The image may be resized from its original size. Therefore, replacing the image with the canvas and setting its background to the image will not work.
What options do I have?
You should be able to use position:relative instead of absolute for your first requirement.
For the second I'm guessing you could put both the image and the canvas inside of a span. The canvas would have a width/height of 100% and would be resized as the image resizes because the size of the div would change to fit the image.
EDIT: actually I'm not sure position:relative would work. But I believe if you use position:absolute and the parent element has position:relative, than the absolute positions will be relative to the parent.