Can you resize images to be fullscreen with javascript in the same way you can with flash?
Ive found this link but its for an entire plugin with slideshow, etc not just the feature I need for a more custom design:
http://buildinternet.com/project/supersized/
And this plugin seems to only with with background images:
http://www.ajaxblender.com/bgstretcher-2-jquery-stretch-background-plugin-updated.html
Ideally id like to do this with jQuery.
Thanks
Here's an example of a basic implementation. It accounts for resizing of the window, but doesn't account for any focus point of the image and so the focus point could fall out of view for oddly-sized windows.
http://jsbin.com/okizi5
Edit: I forgot to point that that the width/height attributes on the image are necessary in this version for all browsers (notably Safari) to calculate the aspect ratio of the image. If your image is to be dynamic and the dimensions are not available then these could be calculated within the 'load' function bound to the window.
Yes. I don't see why you can't, really. You can use JavaScript, and its DOM interface, to modify the style properties of an image to resize an image. You don't even need a heavy library like jQuery; it's all native.
How about this:
$(window).resize(function() {
$('#myImgId').width($(window).width());
$('#myImgId').height($(window).height());
});
It will not maintain the aspect ratio...
Related
On our site, we are using the Bootstrap v3 grid system to control the layout of the page. When a user resizes their browser window, the bootstrap system kicks into gear and all works well.
We have a new use case, where a user needs to design a page for a given browser width, but we want them to do it without having to resize their own browser.
We have an outer that wraps the content and is set to a fixed with, and we want Bootstrap to check the width of that content and apply the responsive layout based on that 's width, no the browser window width.
Is this possible? And if so, can someone point me to an example or documentation of how to achieve this?
I recently had a similar case and used ResizeObserver to observe the width of an element to base CSS from rather than the viewport. Learn more:
https://philipwalton.com/articles/responsive-components-a-solution-to-the-container-queries-problem/
https://www.w3.org/TR/resize-observer/
Note: this is currently only supported in Chrome
Follow up: CSS container queries have been released as of April 2021, but there is no browser support for them yet – https://caniuse.com/css-container-queries
can anybody tell me how to resize image as we resize browser like it is done in https://login.microsoftonline.com/
I have tried it with css approach using media query. But I want to resize image on the fly like Microsoft have done. This is what I did http://codoc.testdrive.ch/Intranet
Check out this great resource so you can understand how it works.
You have several alternatives without using Javascript, such as setting the image to 100%.
img{
width: 100%;
}
Here is a demo you will see how the image gets larger or smaller depending on how you resize the window
You can also check this demo
Use the resize event as describe in (plain Javascript) JavaScript window resize event or (jQuery) How can I detect window size with jQuery?. Then set the image size you want.
The effect where the picture decreases in size can be done very simply in CSS without using any JavaScript:
#image_id{
width: 100%
}
What Microsoft has done is implement a "responsive design." This means that the design is both "fluid" and "adaptive."
"Fluid" refers to the fact that the image changes in size as the screen becomes smaller.
"Adaptive" refers to the fact that the image disappears when the screen becomes too small. (The layout of the page changes.)
The Fluid part can be achieved using the code I have above. However, the Adaptive part will require media queries, like you did. Combine the two, and you get the effect Microsoft has.
Here's some more quick information on Responsive designs for you:
Youtube video: http://www.youtube.com/watch?v=T6MCkGWSXa0 (1:29 long)
Live examples: http://liquidapsive.com/
More live examples: http://bradfrost.github.com/this-is-responsive/
Does anyone knows if there is a way to refresh/reload jquery under css media queries changes?
I have created an example with this situation: https://dl.dropbox.com/u/23044665/index.html
If you resize the browser less than 960 pixels the browser apply the media query BUT the jQuery plugin area width stays at 960 pixels.
Try this
$(window).resize(function() {
slider.reloadShow();
});
If you want to perform additional JavaScript operations when the screen size changes then add listeners for orientationchange and resize to catch the browser changing size or a tilt on tablet/phone.
The problem seems to be that the plugin is adding the widths of the slides and the container as attributes of the the HTML, e.g. style="width:960" which will override anything in your style sheets/media query.
I would recommend that you use a different slider plugin tbh - this one is built for rersponsiveness and automatically recalculates everything when you resize the browser
I'm trying to get a background image to behave like GE's background on their website:
http://www.ge.com/stories/powering-gas-engines.html
I was wondering what CSS or javascript techniques they were using to get that kind of effect.
There is a jQuery plugin that can help you accomplish this, and he's laid out the code in his description to give a good idea of how it all works. What I like about this one is it also maintains aspect ratio.
http://bavotasan.com/2011/full-sizebackground-image-jquery-plugin/
it is an image, rather than a background image, and they use a javascript function called from the onresize event to set the width and/or height of it to the full width of its containing div.
It is possible to create a similar effect by using the css3 background-size property, but this is only supported in the css3 compliant browsers.
css width: 100% for both container and background image and use media queries to control minimum windows size to use elastic width or fix width
I have a small editor in my web site and I can add an image on it. I can resize the images using a jQuery plugin (Resizable). For this reason I had to disable the resizing borders around the image. In Firefix I did it using this:
execCommand("enableObjectResizing", false, false);
and it worked fine. How can I do something similar for IE?
Thanks in advance
You can't, I'm afraid. The only way to include a non-resizable image in an editable element in IE is to set it as the background image of an element and ensure that element does not have layout.
If you want to achieve the same effect in IE11, you can use this code (javascript):
function controlselectHandler(evt) {
evt.preventDefault();
}
document.body.addEventListener('mscontrolselect', controlselectHandler);
This removes the handles and resizing functionality. The cursor still changes to a resize cursor on hover, but this should be solveable with css.
I am not sure whether this will work in previous version of IE.