I know how to resize a div, but this one that I'm working with has a lot of elements inside it, like buttons, etc. How could I resize those all in one shot? I really don't want to manually resize each one.
Use % and it will resize relative to the size of the containing element. In this fiddle, the css for the button is the same, but is relative to the size of the containing element. I've used percentages for the padding as that's what I'm using for the size of the button here, but you can use it on width/height as well if you wish:
relative sizing (jsfiddle)
One thing to note - because the font size isn't being set relatively here, the button size isn't scaling the same way, but you can use percentages for that as well.
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 have a parent div with relative size.
inside the div I need to place some inputs, and below them an image.
The number of inputs is dynamic, so I don’t know in advanced the size it will take.
Is there any magic CSS styling, so the image size will fit the available place, without changing the parent div size?
I prefer no javascript.
Thanks
See My Fiddle:
http://jsfiddle.net/5BEsZ/
I've discovered something very strange that I haven't seen documented anywhere else... Was wondering if you all had a solution.
You'll notice the negative margin hits a limit at around -212% for image elements. Is there a reason for this? Can you think of a work around?
Why I Need This (what I've tried):
I'm making a fluid layout and I want to display a rating system. I have a sprite sheet of stars (similar to the one in the fiddle) that I want to reuse at various sizes.
Because the size changes I can't use a background image. So I decided to use an image inside a container with a variable width and overflow:hidden. The sprite sheet adjusts to the width of the container and the container's viewable content is determined by a padding-top:20%. This is so it can be fluid with its width (since every star is a box, the total height is 20% the width).
Then I try and position the star image inside the container with margin-top. I tried using position:relative and a top:-X%, but because the container technically has no height this was causing issue on mobile phones (-100% of 0 is 0, etc).
So I assumed negative margin would work, but then discovered this strange issue!
NOTE: Because it affects only the last row I can make it work in my situation by using a padding-bottom instead of top (thereby bumping every star row up 1), but this isn't an adequate solution for me because it just ignores the problem. What if I wanted quarter stars?
I've updated your fiddle. img tags are "inline" elements by default, which impacts the way margin is calculated relative to the containing element. By forcing the image element to be rendered like a block (display: block), you're able to achieve the results you were expecting. A div element is a block by default.
As a side note, you'll want to avoid using inline styles (a different sort of "inline"!) wherever possible. Typically your styles would be included in a stylesheet instead of in a style attribute directly on the element. I included the fix (display: block) in the attribute to match the code style of your html.
I don't know why, but if you float the image the problem goes away.
<img src="http://www.whitepages.com/common/images/sprite_stars.gif?1343868502" id="stars" style="width:100%; float: left;" />
So, the answer to fix your problem: http://jsfiddle.net/5BEsZ/2/
If anyone could explain why this happens?
I have made a simple website and am happy witht he fact that I have had minimal use of div elements. I cannot explain why I do not like using divs, I just dont. That being said I have 2 elements side by side and when the browser shrinks the elements collapse one under the other (it's a paragraph with an image next to it, for ease of picturing).
Other than using position relative and adjusting pixels or wrapping the elements in divs is there a way to prevent two floated elements from changing position when the browser screen shrinks?
you could have a min-width on the container of those two elements. and if they aren't in a div, remember that <body> can also have this min-width
Try to give a width on the container for exampleboth the elements for example say
< class="element-container"> in order to seperate both the elements overlaying on each other.
Setting max-width and max-height to 100% for an image does what's intended and scales the image to fit it's container with aspect-ratio intact. However, I need to achieve the same thing but with an extra container kept tight around the image (to be able to position other stuff relative to the image).
I'm looking for non-JS solutions and mark-up semantics is not an issue since this is for an app. (tables would be ok). Also image dimensions can be considered known.
Another way to describe what I want: Make an image always fit inside the body and display a border around it (not using the trivial solution of putting a border on the image itself)
Here is a fiddle showing the problem. I gave the image an 0.5 opacity to make the yellow container show through. The objective is to have the container always the same size as the image. Ie. the image will always have a yellow tint but no other yellow areas should be visible. Note: I'm not trying to achieve any coloring effects it's just an illustration of the problem.
Try this one, http://jsfiddle.net/xmarcos/K4dHr/
Update: http://jsfiddle.net/xmarcos/K4dHr/4/
Here, this seems to work: http://jsfiddle.net/Wexcode/vzc4m/1/
You don't need to have a max-height around your <div> because it will stretch to the dimensions of its inner elements if you set it as display: inline-block. Forcing the <img> to have display: block will ensure that there isn't any extra space added around element inside container, unless you specify it (using margin).