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
Related
I would like to create a background image inside a container that is about halfway down on the page. The height would maybe be 20%-30% of the screen height. Do I need to create more than one image and use CSS Media question to display one image and hide all the other images for each resolution range? Or, is there an easier way to make the image scale automatically. Does it help if the image is in vector format?
If you want the image to always cover the div, you can use CSS3's new background-size values:
background-size: cover | contain;
cover
With cover, the image will always fill the whole container no matter the size, the browser will adjust the image, and the image might get cropped.
contain
The whole image will be always visible, i.e if the container gets smaller than the image, image is scaled down to fit the container, this way, it's normal to see empty spaces in container.
I want to create a simple fluid image viewer: two arrows hugging variable width central images. The images would be scaled according to a fixed height that is a percentage of the viewport.
However when I set my image height to 100% via css it stretches its div past its max height.
Heres a codepen link to show you what I mean: http://codepen.io/anon/pen/bjrhk/?editors=000
I know I need to have defined a height all the way up the heirarchy, which I think I've done, but I can't seem to figure it out.
I know this is a common question but seems to be a different problem with each person...
I am building a module to display html divs(pages) which are designed to in a later stage be printed out as A4s. The area where these divs are displayed is however to small to display the full width of the divs and thus the pages and their content need to be scaled down to fit within the display-area at hand.
The children of the a4-pages are styled with both set widths/heights and percentages so it would be a nice approach to use the CSS3 Tranform scale to scale the pages down just enough so that they can be displayed but this becomes problematic since the scale is done after rendering and thus creates an white area around the pages.
I'm using jquery to rescale the pages when window is resized and will also implement this when page is loaded.
How do i scale several divs within a common wrapper and also readjust the parent so that the scaled div is showed without any padding around it?
Edit: I've put together a simple fiddle displaying the issue http://jsfiddle.net/96jkU/
#toBeScaled should display over the full width of #displayArea but still be scaled to 0.5
If I understand the question correctly, you want the scaled div to sit in the top left corner of the parent div.
In that case, the problem is that the transform origin is set to 50% 50% by default. This is good for rotations (you typically want to rotate something around its center) but not really for scaling; your div gets shrunk down to the center of where it would originally be.
Solution: all you need to do is add
transform-origin:0 0;
(with the proper prefixes) to the style for #toBeScaled.
See updated fiddle.
i have two div in my html page like this image.
main div with background image has responsive technology. i have second div with face picture as main div content that show in above picture with red border, which its resizing should be correspond to the main div background in a way that it's Aspect ratio remains last value.
http://f6design.com/journal/2011/10/18/responsive-elements-that-retain-their-aspect-ratio/
You have to manipulate the padding property on the parent div to get the desired effect of retaining the aspect-ratio. If you show me your code from some live website, I can further pin-point where you need to make the changes in your CSS.
I had an idea for a background but I don't know if it can be done, and if it can, what the best method would be. Just to let you into my idea, it's a grid of squares as the background for a page but when you mouse over one it changes color and slowly shifts back(I know how to do the animation portion). The grid is supposed to span the entire page, width and height, and overflow would be hidden. I'd also wish that it could re size itself if the page does
So I'm wondering if this can be done. If it can, how would I generate the grid?
I'm at a complete loss. Any ideas?
I would use <canvas>. Or maybe fill entire body with equally sized DIV's with height and width defined in percentages. Lets say that would be grid of 10x10 DIV's. Or you can create on -the-fly with jQuery as many DIV as you want (to fill whole height). You can float those DIV's to fill entire viewport, and if window is resized use media queries to arrange them. On hover, you can apply some animation on every DIV. Of course, you can put other elements over those DIV's.