My style definition is:
<style>
.x { background-image:url(https://raw.githubusercontent.com/iamcal/emoji-data/master/sheet_emojione_64.png);
border:solid 1px red;
}
</style>
The image file above is 2624px x 2624px containing emojis in 64px square cells. 64 is 1/41 of 2624. The image in cell 13,7 is a camel.
My markup is:
<div class='x' style='background-position:-832px -448px; height:64px; width:64px;' ></div>
<div class='x' style='background-position:-832px -448px; background-size:4100%;
height:64px; width:64px;' ></div>
<div class='x' style='background-position:-312px -168px; background-size:4100%;
height:24px; width:24px;' ></div>
The JS Fiddle is at https://jsfiddle.net/5j5ahhda/ and the output is:
My understanding of the second DIV is that I am squeezing a 2624px image into a 64px square, 1/41th of its size, and then blowing it up 41 times, thus resulting in an image the same as the original size. Is this understanding correct?
The third DIV produces what I was setting out to achieve, but I don't understand what causes the background image to scale nicely to 24/64. Is it the specified size of the containing DIV that causes the scaling?
What I want is 24/64 of the original image size. Is there a more straightforward way?
My understanding of the second DIV is that I am squeezing a 2624px image into a 64px square, 1/41th of its size, and then blowing it up 41 times, thus resulting in an image the same as the original size. Is this understanding correct?
Yes.
The third DIV produces what I was setting out to achieve, but I don't understand what causes the background image to scale nicely to 24/64. Is it the specified size of the containing DIV that causes the scaling?
Yes. A percentage background-size is relative to the size of the element's background positioning area. This area is determined by the element's dimensions, not the image's. This is what allows a background image to scale with the size of the element based on the element's dimensions when a percentage background-size is set.
Related
The following CSS style dictates that an image that's 400 pixels wide will appear to be 200 pixels wide if it's placed in a div measuring 400 pixels...
img { width: 50%; }
But is there a style that makes an image display at half its own size, regardless of the container it's in?
I'm asking this because I have a lot of floated image slices to work with. For example, suppose you take an image of a dinosaur that's 400 pixels wide and slice it into quarters horizontally. The four resulting images might measure 350px, 300px, 280px and 200px. If I want to display them in a mobile device, I have to create separate styles for each piece, setting the width at half of the original width, one third the original width, or whatever.
So I just wondered if there's some sort of style I could use that would automatically reduce each image by a third, a half, etc. Thanks.
But is there a style that makes an image display at half its own size, regardless of the container it's in?
I can’t think of one simple property for the image itself – but if you place them in an element with display:inline-block, you’ll get exactly what you want:
<div style="width:400px"><span><img src="http://placehold.it/400x200"></span></div>
<div style="width:600px"><span><img src="http://placehold.it/400x200"></span></div>
<div style="width:800px"><span><img src="http://placehold.it/400x200"></span></div>
div { background:red; }
span { display:inline-block; }
img { width:50%; }
http://jsfiddle.net/H8AQY/
I was trying to work with background image property. I was really confused with repeat x and y. I have tried to figure out what it does, and I found online things I found not good enough. I have created two columns, and the left column would get 63% and the right column 37%(approximate). I used background image with 3000px width and 160 height, and used two different colors for the two columns. That is, after 1890px or 63% the color changes.
I am using my laptop with 1350px wide screen. I kept changing the percentage of repeat-y and see what is it is doing. I still can't figure out, what happening. This is what I understood, and if I am wrong please give me more simpler explanation. For me, if I set repeat y 44%, then it is taking 44% of the current container, let say Z PX, and set the background image by starting from z PX to the end of image, in my case to 3000px, and repeat the process vertically. I hope I am clear. Am I correct? Please, let me know what you think or explain to me on your own ways. Thanks!
#page{
background:url("bg.jpg") repeat-y 63%;
}
.clear{
clear:both;
}
div.left{
width:63.11111111%;
float:left;
}
div.right{
float:right;
width:36%;
}
}
</style>
</head>
<body>
<div id="page">
<div class="left">
this is left column
</div>
<div class="right">
this is right column
</div>
<div class="clear"></div>
</div>
</body>
The background-repeat property and the background-position property are two different things. The background-repeat property sets if or how a background image will be repeated; default, a background-image is repeated both vertically (= repeat-y) and horizontally (= repeat-x).
In your example the image will be vertically repeated; but the div's your are using don't show much about it, because the image is much bigger than your div's . I suggest you try it with a smaller image, e.g. 25x25px and put some text (e.g. lorem ipsum) in or give this a height of 200 px, and play with the values again.
The background-position property sets the starting position of a background image; the first value is the horizontal position and the second value is the vertical.
In your example the percentage describes the point off the image to start from, on the horizontal axis.
If you only specify one keyword, like you did, the other value for the vertical axis will be "center". So your image will be viewable from the middle, on the vertical axis.
Try out my suggestion! If it does not seem to be working, I'll put an example online. Let me know.
PS: There are no colors specified for the columns.
I got an image that contains a complex gradient with different intermediate colors. height: 1px; width:100px
I got div blocks with a background color.
I want the background color of the div blocks to come from the gradient image.
For example : .div50 class will have the 50th pixel of the gradient image as background and repeat-x and repeat-y.
What is the best way to achieve this ?
Thanks !
There doesn't currently seem to be a cross-browser solution to this.
w3 seems to be developing a cool solution to this problem of being unable to use "image fragments".
They propose cropping the image within the actual image call.
Instead of using:
background-image: url('swirl.png'); /* old UAs */
They propose:
background-image: image('sprites.png#xywh=10,30,60,20'); /* new UAs */
Due to the fact that this is still in the works, it probably isn't so useful to you...
If you need a solution now, use Mozilla:
background: -moz-image-rect(url('Image.jpg'), 0, 1, 1, 0);
This will get the first pixel (top left) of your image.
-moz-image-rect takes five values:
Image URL
Top-The distance to begin from the top.
Right-The distance to end from the left.
Designates the width.
Must always be larger than "Left".
Bottom-The distance to end from the top.
Designates the height.
Must always be larger than "Top".
Left-The distance to begin from the left.
Example Only viewable in Mozilla browsers
Made using this image:
-moz-image-rect(url('Image.jpg'), 10, 100, 25, 50);
Image: Image.jpg
This image will be cropped to 15px tall (starting immediately after the 10th pixel and continuing to the 25th pixel) and 50px wide (starting immediately after the 50th pixel and continuing to the 100th pixel).
A somewhat simple no-image-required solution, would be to use a pixel color finder, such as instant eyedropper, to figure out the 100 different colors you would need to represent all of the pixels in your 1x100 image. Using those colors, you can very easily create backgrounds that will function cross-browser.
Hope this helps!
I'd do it like this:
HTML :
<div class="background_color">
<div class="gradient_50"></div>
</div>
CSS :
.background_color{
background-color:#121212;
position:relative;
height:150px;
width:300px;
}
.gradient_50{
background-color:red;
height:50px;
position:absolute;
bottom:0px;
width:100%;
}
JsFiddle you can put background-image for your effect
For my mobile website I want to show images of different but known heights/widths with two constraints:
The image should take up the whole width of the browserview
The height should be scaled (down or up) accordingly to keep the proportions
As soon as the browser downloads the image, it is really easy with the following CSS:
<img src="myImageURl" style="width: 100%; height: auto;" />
But because the loading of the image takes some time, I want the browser to layout the image before it downloads it. So the browser does not need to rerender the page, once he fetches the image. I tried the following approaches, which failed:
// The image is not layouted before fetched
<img src="myImageURl" height="myImageHeight" width="myImageWidth" style="width: 100%; height: auto;" />
// The image is layouted, but wrong: height is not proportional to the width anymore
<img src="myImageURl" style="width: 100%; height: myImageHeight;" />
I would love some help here. But please in CSS, I don't want to use Javascript / jQuery if I don't have to.
UPDATE
I guess I am not the only one with this problem: https://graphicdesign.stackexchange.com/questions/3274/fluid-images-how-to-set-width-and-height
As Pete already said, you can not do any (automatic) calculations before the image is downloaded, so the browser knows its width and height.
But since you are able to determine the aspect ratio of the image beforehand, you could try a “workaround” by adding an extra placeholder element around the image – and make use of the fact that padding values given in percentage always are calculated based on the width of an element, even for padding-top/-bottom.
That could look something like this:
<div style="position:relative; width:100%; height:0; padding-top:50%;">
<img style="position:absolute; top:0; left:0; width:100%;" src="…">
</div>
This is a div element with no height, but a padding-top – that will give it an actual “height” of 50% of the computed 100% width. (That would be for an image with an aspect ratio of 2:1 – for 3:1 the padding-top value would have to be 33.333% accordingly – and so forth, basically height/width*100.)
That should span up our placeholder even before the image is loaded.
The image itself is positioned absolutely inside this relatively positioned placeholder – that makes sure it gets displayed at the same position in the document.
The only thing that might be problematic is rounding that has to occur for values with decimal points – 33.333% of 1000 pixels would be 333.33 pixels, and the browser has to round that down to 333 pixels. Should the resized image have an actual height of 334 pixels however, it would just flow out of the area the placeholder div is spanning up by that one pixel. May depend on the actual layout (and your fetish for pixel-perfect accuracy) whether that’s acceptable or not.
I am loading images in multiple places where the site theme will have them displayed in different sizes. I experimented with the CSS properties and found that I could scale the image using the height and width parameters and crop the image using position:relative and overflow:hidden.
What I want to do though is a combination of that. To scale the image down until the width is the width of the container element or the height is the height of the container element (which ever comes first). Then crop the rest.
Thus the image should be in proportion and also fill the container, regardless of shape.
Any ideas?
Marvellous
I'm not entirely certain what you're trying to do, but here is some guidance that will help you use only CSS properties to achieve some image resizing and clipping.
The code below will resize an image to whatever the container is.
<div id="THE-OUTER-CONTAINER" style="width:100px; height:100px; overflow:hidden;">
<img src="YOUR_PIC.jpg" style="width:100%; height:100%;"/>
</div>
the key is understanding that height and width properties of the img can use %. Using % in your design is great for giving flexibility. This will of course, force the image to whatever size the parent container is. So if the parent container is not the right aspect ratio it will deform the image.
To preserve aspect ratio you will need to know the dimension to expand along in advance and only specify that in the img tag style. For instance, the below will properly resize the image along the width only.
<div id="THE-OUTER-CONTAINER" style="width:100px; height:100px; overflow:hidden;">
<img src="YOUR_PIC.jpg" style="width:100%;"/>
</div>
Using the above, if YOUR_PIC.jpg is 200x200 pixels, it will scale it down to 100px and clip 100px off of the bottom.
If you want it to expand within ranges along with the width/height you would use 'max-width'/'min-width'and 'max-height'/'min-height' css properties on the img. Set those equal to what you need. Then you will have something like this:
<div id="THE-OUTER-CONTAINER" style="width:100px; height:100px; overflow:hidden;">
<img src="YOUR_PIC.jpg" style="width:100%; height:100%; max-width:50px; max-height:50px;"/>
</div>
The above will make sure that the image doesn't expand for containers larger than 50px but will shrink for any container below 50px.
Alternatively, you can use some javascript to do some calculation of sizes dynamically. This would be useful if you do not know in advance which dimension you want to resize upon. Use javascript to calc the size and then set the above css properties accordingly. I would suggest using jquery to make your javascript life easier.
Hope this gets you on the right track.
To reword your question more succinctly; you want to scale an image to fill it's container element. This can't be done at the moment only using CSS3, but Christian Varga has achieved it beautifully using jQuery:
https://christianvarga.com/jquery-resize-image-to-parent-container-plugin/
You can use javascript and css. Javascript to check the image heights/widths, then apply appropriate css.
Javascript (note: using zeptojs which is pretty similar to jQuery):
$(window).bind("load", function() {
$.each($("img"), function(index, item) {
var image = new Image();
image.src = item.src;
if (image.height > image.width) {
$(item).addClass("resize-x");
} else {
$(item).addClass("resize-y");
}
});
})
CSS:
.resize-x {width: 64px; height : auto;}
.resize-y {width: auto; height : 64px;}