I would like to write a jQuery plugin to animate a background-size property from cover to 100% and vice versa but I don't know how to get the cover to percent values, is it possible to get the resized width and height of a sized background image?
I know I can get $('#selector').css('backgroundSize') but I get cover and I would like to convert it in the current width and height of the background image, how can I do that?
If you can get the dimensions of the image then you can check them against the dimensions of the container in which the image is the background-image. You can use these two pieces of information to turn cover into a percentage.
To get the dimensions of the image, create an img element to test:
$('<img />').bind('load', function () {
//the image has loaded, you can now get it's height/width
}).addClass('offScreen').attr('src', '...');
The offScreen class is used to move the element off the screen while it loads so the user can't see it happening:
.offScreen {
position : absolute;
left : -9999px;
}
Related
The images can be wider than the width of their container or smaller than it. To control the width of larger images, I can use max-width: 100%. Similarly, I can also set width:100% for smaller images.
Is there any way to set image width to 100% only if the original image is at least 50% of its container width? I will prefer a CSS based solution if it exists because the images will load dynamically.
var containerDiv = $(".container");
var image = $(".img");
image.width(image.width()>containerDiv.width()?containerDiv.width():image.width());
Since the images will load dynamically, I think your best shot is with javascript. You'll need to get the width of the image (Determine original size of image cross browser?), and then you can compare that to the parent of the image, and determine if it's above or below 50%.
UPDATE:
Considering the question didn't provide any sample code, I didn't want to just guess. But, the pseudo code would look something like this:
// after ajax completes
var image = jQuery('.image'),
parent = image.parent();
if (image.width() * 2 >= parent.width()) {
image.css('width','100%');
}
I have a block that is of size 180x270 that I need to show images
The image sizes can vary, and I want to make sure it expands or shrink so that the smaller border (either height or width) matches the block, whereas the larger border gets cropped while preserving aspect ratio.
Examples are the following:
- An image of 360x600 gets resized to 180x300, and I crop the height from 300 to 270
- An image of 100x135 gets resized to 200x270, and I crop the width from 200 to 180
Basically I want to make sure there's no white space as I expand/shrink the image while preserving aspect ratio by cropping the section exceeding the block
Any suggestions on css or javascripts that can handle this?
It seems like you're looking for background-size:cover, which works when the image is a background-image
background:url(imgurl.jpg) /* Other background image properties */;
background-size:cover;
Demo
Zach's solution is best if you can use a bg-image for the task, but if you need to use an <img> tag (there are cases when this is advised), then you need javascript to calculate the image's aspect-ratio and determine whether it is more squat or more vertically stretched than the target frame. Then there's a little CSS as well:
JavaScript
//obtain a dom-reference for the image using getElementById
//or by some other means depending on what you know of its HTML
var img = document.getElementById('some-image-id')
var aspectRatio = img.clientWidth/img.clientHeight;
//if the img is more squat, set it's height equal to the target frame's height
if(aspectRatio > (270/180)){
img.style.height = 180 //image is
}
//otherwise the image is more vertically stretched
// so set the img width equal to the target frame's width
else{
img.style.width = 270;
}
This will set the
CSS
Finally, to center an over-sized image inside a wrapper vertically and horizontally, regardless of how the fit was made:
.wrapper{
position:relative;
display:inline-block;
}
.wrapper img{
position:absolute;
top:-9999px;
right:-9999px;
bottom:-9999px;
left:-9999px;
}
I try to make an image's height to always be the 1/4 of the window's height, based on responsive design and fluid images
The image is a random image picked up by the database, so I dont know if its gonna be elongated or not.
This is what I got untill now
//after the path of the image is randomly collected with websockets
elem = document.createElement("img");
elem.id="frontimage";
elem.setAttribute("height", window.innerWidth/4+'px');
document.getElementById("icon").appendChild(elem);
//this is triggered after window.onresize (see below)-in case the browser window is scaled
function img_adjust( img ) {
var beholdItsTheNewHeight = window.innerWidth/4;
img.style.height = beholdItsTheNewHeight + 'px';
}
window.onresize = function() {
img_adjust( document.getElementById('frontimage') );
}
<div id="icon" ></div>
(based on the anser by migf1, from here , sorry its Greek)
And that's it. Works fine , if you just open a browser and the browser expands to the whole screen.
Problems
-I simply cannot align the image to the center of its container. I tried margin, padding, float, position:absolute. Nothing works
-If I start scaling the browser's window (simply dragging one corner) the image's height does not "follow". Resizes, but not actually in 1/4 of screen's height.
-If I open a browser and it's not expanding to the whole screen, the image's height not scale to the 1/4 of screen's height.
Any advise?
Thanks in advance
You can use css property #icon{ text-align: center;} on the container DIV to center the image horizontally within the DIV. Look at: http://jsfiddle.net/2vxmX/
I am using full browser width height jquery blockUI to display selected image from gallery. On the image bellow is scheme of view in blockUI.
Basically view in side blockUI has width and height set to 100%.
Inside there are two more divs. Right has width set to 80% of the view and it contain image.
Image has width and height set to 100% (but this is wrong I know).
Images that I display here are images in original sizes uploaded by users. But if monitor is 1024x768 and uploaded image is 600x1900 I don't what to that image goes out of the screen.
So how can I fix this to display that image centered and proportional?
Use max-width and max-height, you will need to use JavaScript in IE 6 if you need to support it:
#blockUI img {
max-width: 100%;
max-height: 100%;
}
This keeps the img element's aspect ratio when resizing, up to the maximum possible width and heights.
My website's background is a huge image that covers the whole webpage, how can I make it so that, we detect user's screen size and change the background image accordingly?
Say for example, my background image is 1x1px, if user screen is 2x2px (this is just an example, nobody has this kind of small screen), I want stretch my background to fit 2x2. If user screen is say, 0.5x0.6px, then I want my background to be shown only its 0.5x0.6px part, not the whole 1x1px.
Use an image tag as the background give it a 100% for width and height, and set it behind all of the content with z-index give it absolute positioning and set its top and left where you need it to be.
<img src="yourimage" width="100%" height="100%" style="z-index:0"/>
Live Demo
In CSS3, we have a new property called background-size:
body {
background-size: 100%;
}
looking for this?
<div style="width:100%; z-index:0; height:100%; background: url(1pximage.gif)"></div>
You can detect the users screen size and do it, also you can attach a event handler to do the same when the window size is modified.
$(function(){
$(window).resize(function(){
var windowW = $(window).width();
var windowH = $(window).height();
//Using above variables you can deside the size of the background image to be set
}).resize();//Trigger the resize event on page load.
});