I'm trying to show an image (of arbitrary width/height) in full screen when the screen (also of arbitrary width/height). I'm using HTML/CSS/JS. I want the image to always take up the full screen. If the image is a lower aspect ratio than the screen then I should clip the top and bottom. If the image is a higher aspect ratio than the screen then I should clip the left and right. I never want to see black around the edges.
I can do it using background-image (and background-position, etc.) but I'm having an issue with that (the image flashes as I update it). So I'd like to use an tag. Does anyone know how I'd do that?
I think the question is nice and clear and obviously the OP doesn't have any code... that's why he's asking the question.
I've run into that exact issue before. I don't think there's a way to do it using HTML/CSS if you want the image to end up larger than the containing element with the excess clipped unless you can put the image in the background. If you need to use the tag as you state, then a good solution is to do this imperatively. Here's what I did.
function setImagePosition() {
var img = q(".viewCamera #viewport img");
if (outerWidth/outerHeight > img.naturalWidth/img.naturalHeight) {
img.style.width = format("{0}px", outerWidth);
img.style.height = "";
img.style.top = format("{0}px", (outerHeight - img.clientHeight) / 2);
img.style.left = "0px";
} else {
img.style.width = "";
img.style.height = format("{0}px", outerHeight);
img.style.top = "0px";
img.style.left = format("{0}px", (outerWidth - img.clientWidth) / 2);
}
}
Let me explain...
The outerWidth/outerHeight results in the aspect ratio of the window. The img.naturalWidth/img.naturalHeight is the aspect ratio of the image. If the first is greater then we need to set the width of the image to the width of the window and calculate the top value to center the image vertically. If the second is greater then we need to set the height of the image and then use the left to center the image horizontally.
Hope that helps! You can find a bunch of Windows 8 HTML/JS related help in my codeSHOW project at codeshow.codeplex.com and in the Windows Store at aka.ms/codeshowapp.
If you are using jQuery, have a look at these:
http://vegas.jaysalvat.com/
or more lightweight:
http://srobbin.com/jquery-plugins/backstretch/
if you want it to stretch use background-size, or if it has to be a tag, use max-width:100%; in order to center use display:block; and margin:0 auto;
Im not quite sure what youre after though...
How do you update the image so it flashes? When does it occure? It sounds like a job for background-position:center.
Related
This seems basic but i can't wrap my head around it.Honest ain't got no clue but what i need is set the image width in percentage just like in css file but this time around i wonna know the method or technique used to do that.
Example..
//I have tried this but it didn't work
//var image_width_from_server=(the_img_width_from_php);
//image_width_from_server=image_width_from_server/$(parent).width()*90
//Now the result i get from the console does not match the browser set width of the image's p-ercentage width.
#parent{
width:250px;
height:250px;
background:deepskyblue;
border:5px;
}
#parent img{
width:90%;/**Now how can i do this in javaScript..?*/
height:auto;
}
/**Please note that direct css code won't help.
I need a way in javaScript to set the image's width using percentage but also basing on both the image's width size and the parent width size too.
*/
<div id='parent'>
<img src='https://i.vimeocdn.com/video/584087165_780x439.jpg'/>
</div>
Please note that direct css code won't help.
I need a way in javaScript to set the image's width using percentage but also basing on both the image's width size and the parent width size too.
Am really out-of ideas, Any help appreciated.
Thanks
new width = ( old width / 100 ) * percentile ?
First select your image and after that you can set the width from js.
$('#parent > img').css('width', '90%');
If you want to use vanilla JavaScript instead of JQuery you can use .offsetWidth to retrieve element width, and then:
var newWidth=document.getElementById("parent").offsetWidth * 0.9; // Get 90% of parent width
document.getElementById("img").style.width = newWidth + "px"; // Set the new width
Another simple solution that avoids using a calculation consists on setting the width percentage directly (still using vanilla JavaScript)
document.getElementById("img").style.width = "90%";
I am trying to make a grid of squares which updates with the size of the window. I am currently using the following js code to do this:
$(window).ready(updateHeight);
$(window).resize(updateHeight);
function updateHeight() {
var div = $('.grid');
var width = div.width();;
div.css('height', width);
var ratio=14.3/126;
div = $('.face');
width = div.width();;
div.css('height', width+(ratio*width));
ratio=30.5/15;
div = $('.cubie');
width = div.width();;
div.css('height', width+(ratio*width));
};
The cubies are nested inside faces, which are nested inside the grid in my html. First i tried setting the height with
div.css('height', width)
..but for some reason that didn't make my faces and cubies square. The ratio thing helps correct it on my screen size, but the smaller i make the window the more noticeable the error becomes, so I'm searching for a different solution right now, and i cant seem to find one. Help appreciated.
PS: if it matters, the .grid width is 50% of the body, the .face are 20% of the .grid, and the .cubie are ~33% of that.
How Squarespace centered every image even though they have different dimensions varying between landscape and portrait images?
I've been trying different solutions all day and I can't seem to figure it out.
http://bryant-demo.squarespace.com
Take a look at their lightbox and the code for it. I tried emulating it, but I can't seem to replicate their results.
Don't know what they do, as i can see they get image dimensions and many other things as attributes... but here is simple method for centering, related to screen size, that's basic calculation which is applied in their case, too, i guess. Also, there are different css methods for centering...
screen_width=$(window).width();
screen_height=$(window).height();
img_width= $('#images img').eq(i).width();
img_height= $('#images img').eq(i).height();
//set to center
$('#images img').eq(i).css('margin-top',(screen_height-img_height)/2+'px');
$('#images img').eq(i).css('margin-left',(screen_width-img_width)/2+'px');
Demo: http://jsfiddle.net/dfwosy4m/
P.S. If you set images in some other container, not body, you just have to apply same calculation, for different element.
EDIT:
Actually, same method works, of course, no matter if container is bigger, or smaller than image... So, simple:image center = container center, and overflow:hidden for the rest.
function centralize() {
screen_width = $('.box').width();
screen_height = $('.box').height();
$('#images img').each(function(i) {
img_width = $(this).width();
img_height = $(this).height();
//set to center
$(this).css('margin-top', (screen_height - img_height) / 2 + 'px');
$(this).css('margin-left', (screen_width - img_width) / 2 + 'px');
});
}
centralize();
NEW DEMO:
http://jsfiddle.net/dfwosy4m/3/
P.S. Inspect elements on their page, and in my demo: you will see that same technique is used (hidden image parts will be shown by inspector)... Key is overflow:hidden for the fixed boxes, so... you should apply similar css to get desired effect.
I have the background of a section with the ID named home set as an image. The image has an aspect ratio of 1.5. I've written some very basic javascript to ensure that when the window size is changed, the section scales per the aspect ratio of the image. Inside of that section I have content in a div with the class container. This content is of a certain vertical height. The basic javascript I have written doesn't allow the height of the section to be less then that of the content. Hence, at that point the section stops scaling with the window size. The problem I am having is that when you scale the window past that point and then back, the section doesn't scale back up.
I've created a fiddler to help explain. http://jsfiddle.net/Chadimoglou/Bpryg/ I recommend testing it in mobile mode. To recreate what I'm doing, have the window go full screen. Grab a bottom corner and resize a little to see the background resize with the aspect ratio. Then resize so it's smaller then the height and width of the red content box. After that, pull back out again and you should see the issue I'm having. Below is a snippet of my javascript.
$(document).ready(function() {
var theWindow = $(window),
aspectRatio = 1920 / 1280;
function resizeBg() {
$("#home").width(theWindow.width);
if( ( $("#home").width()/aspectRatio ) < $("#home > .container").height() ) {
$("#home").width( $("#home > .container").height()*aspectRatio );
}
$("#home").height($("#home").width()/aspectRatio);
}
theWindow.resize(resizeBg);
window.onload=resizeBg();
});
Thanks kindly in advance for any help.
http://jsfiddle.net/Bpryg/3/
$(function() {
var $w = $(window),
$h = $('#home'), // CACHE YOUR SELECTORS
aspectRatio = 1920 / 1280;
function resizeBg() {
$h.width($w.width()); // YOUR ERROR ( should be width() )
if( ( $h.width()/aspectRatio ) <= $("> .container", $h).height() ) {
$h.width( $(" > .container", $h).height()*aspectRatio );
}
$h.height( $h.width()/aspectRatio);
}
$w.resize(resizeBg);
$w.onload=resizeBg();
});
I'm not a good JS coder, but going with the logic :
To keep the aspect ratio you could modify the CSS with JS : How to preserve aspect ratio when scaling image using one (CSS) dimension in IE6?
To know whether you should set the height or the width on auto, you'll need to know if the screen size is larger than your image or taller than you image on the aspect ratio. Just compare the two aspect ratio, then you'll know which one will be on auto. Like that, you image will never leave an unfilled part on your background and will expand to it's full width or it's full height, depending on the client aspect ratio and your image aspect ratio.
You can use :
document.documentElement.clientWidth
and
document.documentElement.clientHeight
to get the client window size and calculate the aspect ratio.
Are there any documents/tutorials on how to clip or cut a large image so that the user only sees a small portion of this image? Let's say the source image is 10 frames of animation, stacked end-on-end so that it's really wide. What could I do with Javascript to only display 1 arbitrary frame of animation at a time?
I've looked into this "CSS Spriting" technique but I don't think I can use that here. The source image is produced dynamically from the server; I won't know the total length, or the size of each frame, until it comes back from the server. I'm hoping that I can do something like:
var image = getElementByID('some-id');
image.src = pathToReallyLongImage;
// Any way to do this?!
image.width = cellWidth;
image.offset = cellWidth * imageNumber;
This can be done by enclosing your image in a "viewport" div. Set a width and height on the div (according to your needs), then set position: relative and overflow: hidden on it. Absolutely position your image inside of it and change the position to change which portions are displayed.
To display a 30x40 section of an image starting at (10,20):
<style type="text/css">
div.viewport {
overflow: hidden;
position: relative;
}
img.clipped {
display: block;
position: absolute;
}
</style>
<script type="text/javascript">
function setViewport(img, x, y, width, height) {
img.style.left = "-" + x + "px";
img.style.top = "-" + y + "px";
if (width !== undefined) {
img.parentNode.style.width = width + "px";
img.parentNode.style.height = height + "px";
}
}
setViewport(document.getElementsByTagName("img")[0], 10, 20, 30, 40);
</script>
<div class="viewport">
<img class="clipped" src="/images/clipped.png" alt="Clipped image"/>
</div>
The common CSS properties are associated with classes so that you can have multiple viewports / clipped images on your page. The setViewport(…) function can be called at any time to change what part of the image is displayed.
In answer to :
Alas, JavaScript simply isn't capable of extracting the properties of the image you'd require to do something like this. However, there may be salvation in the form of the HTML element combined with a bit of server-side scripting.
...
< ? (open php)
$large_image = 'path/to/large_image';
$full_w = imagesx($large_image);
$full_h = imagesy($large_image);
(close php) ? >
This can be done in Javascript, just google a bit :
var newimage = new Image();
newimage.src = document.getElementById('background').src;
var height = newimage.height;
var width = newimage.width;
This generates a new image from an existing one and captures this way in java script the original height and width properties of the original image (not the one id'ed as background.
In answer to :
The width/height properties of the document's image object are read only. If you could change them, however, you would only squish the frames, not cut the frames up like you desire. The kind of image manipulation you want can not be done with client-side javascript. I suggest cutting the images up on the server, or overlay a div on the image to hide the parts you do not wish to display.
...
var newimage = new Image();
newimage.src = document.getElementById('background').src;
var height = newimage.height;
var width = newimage.width;
newimage.style.height = '200px';
newimage.style.width = '200px';
newimage.height = '200px';
newimage.width = '200px';
and if wanted :
newimage.setAttribute('height','200px');
The doubled newimage.style.height and newimage.height is needed in certain circumstances in order to make sure that a IE will understand in time that the image is resized (you are going to render the thing immediately after, and the internal IE processing is too slow for that.)
Thanks for the above script I altered and implemented on http://morethanvoice.net/m1/reader13.php (right click menu... mouseover zoom lent) correct even in IE , but as you will notice the on mousemove image processing is too fast for the old styled IE, renders the position but only once the image. In any case any good idea is welcome.
Thanks to all for your attention, hope that the above codes can help someone...
Claudio Klemp
http://morethanvoice.net/m1/reader13.php
CSS also defines a style for clipping. See the clip property in the CSS specs.
The width/height properties of the document's image object are read only. If you could change them, however, you would only squish the frames, not cut the frames up like you desire. The kind of image manipulation you want can not be done with client-side javascript. I suggest cutting the images up on the server, or overlay a div on the image to hide the parts you do not wish to display.
What spriting does is essentially position a absolutely-positioned DIV inside another DIV that has overflow:hidden. You can do the same, all you need to do is resize the outer DIV depending on the size of each frame of the larger image. You can do that in code easily.
You can just set the inner DIV's style:
left: (your x-position = 0 or a negative integer * frame width)px
Most JavaScript Frameworks make this quite easy.
Alas, JavaScript simply isn't capable of extracting the properties of the image you'd require to do something like this. However, there may be salvation in the form of the HTML <canvas> element combined with a bit of server-side scripting.
PHP code to go about extracting the width and height of the really large image:
<?php
$large_image = 'path/to/large_image';
$full_w = imagesx($large_image);
$full_h = imagesy($large_image);
?>
From here, you'd then load the image into a <canvas> element, an example of which is documented here. Now, my theory was that you may be able to extract pixel data from a <canvas> element; assuming that you can, you would simply make sure to have some form of definite divider between the frames of the large image and then search for it within the canvas. Let's say you found the divider 110 pixels from the left of the image; you would then know that each "frame" was 110 pixels wide, and you've already got the full width stored in a PHP variable, so deciphering how much image you're working with would be a breeze.
The only speculative aspect to this method is whether or not JavaScript is capable of extracting color data from a specified location within an image loaded into a <canvas> element; if this is possible, then what you're trying to accomplish is entirely feasible.
I suppose you want to take a thumbnail for your image. You can use ImageThumbnail.js that created from prototype library in this way:
<script type="text/javascript" src="prototype.js"></script>
<script type="text/javascript" src="ImageThumbnail.js"></script>
<input type="file" id="photo">
<img src="empty.gif" id="thumbnail" width="80" height="0">
<script type="text/javascript">
<!--
new Image.Thumbnail('thumbnail', 'photo');
//-->
</script>
for more information
try use haxcv library haxcv js by simple functions
go to https://docs.haxcv.org/Methods/cutImage to read more about his library
var Pixels = _("img").cutImage (x , y , width , height );
_("img").src (Pixels.src);
// return cut image
but try to include library first