I have an image that is larger than its div, and the user is allowed to scroll left and right on the image. I am trying to center the image so the user see's the center of the image. I have tried adding scroll left
The view:
<div style="overflow: scroll;" ng-controller="ColorsCtrl">
<div ng-show="!isLandscape">
<div style="overflow: scroll;" ng-if="isSelected(color.code)" ng-repeat="color in colors">
<img id="fullSwatch" ng-src="{{ images.swatches_large[color.code] }}" full-swatch>
</div>
</div>
</div>
I have a directive that manipulates the image of the picture to allow the scrolling.
colorsController.directive('fullSwatch', function() {
return {
restrict: 'A',
link: function(scope, element, attrs) {
element.bind('load', function() {
var img = element[0];
//swap width and height values because they are before orientation change
var h = Math.max(document.documentElement.clientWidth, window.innerWidth || 0);
var w = Math.max(document.documentElement.clientHeight, window.innerHeight || 0);
var imageWidth = img.width;
var imageHeight = img.height;
var aspectRatio = imageWidth / imageHeight;
// fill image vertically
imageHeight = h;
imageWidth = h * aspectRatio;
img.style.width = imageWidth + "px";
img.style.height = imageHeight + "px";
img.style.maxWidth = "none";
// add scroll left to parent container to center image
var container = img.parentNode();
var scrollLeft = imageWidth / 2;
container.scrollLeft = scrollLeft;
});
}
};
});
The scroll left is not being applied, the image starts out all the way to the left.
Try adding overflow:auto; in the style tag something like this:
<div style="overflow:auto;"></div>
you can see the source code of my quiz site for help
Related
I have a problem with resizing iframe content in IE7.
I have an external iframe
<IFRAME id=fl_game src="my_iframe_page" frameBorder=0 allowTransparency scrolling=no></IFRAME>
with width=100%, height=93%
and add my page into it. Here is a page body
<div id="container">
<div id="game-box">
<div id="flashcontent">
</div>
</div>
</div>
<script type="text/javascript">
swfobject.embedSWF("<%=application.getContextPath()%>/flash/<%= request.getParameter(PARAM_GAME) %>/game.swf", "flashcontent", gameWidth, gameHeight, "10.1", "/flash/expressInstall.swf", flashvars, params);
</script>
On my page I add resize events.
if (window.addEventListener) {
window.addEventListener("load", resizeGame, false);
window.addEventListener("resize", resizeGame, false);
} else if (window.attachEvent) {
window.attachEvent("onload", resizeGame);
window.attachEvent("onresize", resizeGame);
} else {
window.onload = function() {resizeGame();};
window.onresize = function() {resizeGame();}
}
Here is my resizeGame function
function resizeGame(isIEResize) {
var flash = document.getElementById('flashcontent');
var screen = screenSize();
var width = screen.width;
var height = screen.height;
var left = 0;
var top = 0;
if (height * 1.5 > width) {
height = width / 1.5
} else {
width = height * 1.5;
}
flash.width = width;
flash.height = height;
document.getElementById('flashcontent').style.width = width + 'px';
document.getElementById('flashcontent').style.height = height + 'px';
document.getElementById('flashcontent').style.top = '50%';
document.getElementById('flashcontent').style.left = '50%';
if (width < screen.width) {
left = (screen.width - width) / 2 + left;
}
if (height < screen.height) {
top = (screen.height - height) / 2;
}
document.getElementById('game-box').style.top = top + 'px';
document.getElementById('game-box').style.left = left + 'px';
}
function screenSize() {
var w, h;
w = (window.innerWidth ? window.innerWidth : (document.documentElement.clientWidth ? document.documentElement.clientWidth : document.body.offsetWidth));
h = (window.innerHeight ? window.innerHeight : (document.documentElement.clientHeight ? document.documentElement.clientHeight : document.body.offsetHeight));
return {width:w, height:h};
}
And here is a question:
In IE7 function screenSize() gives me wrong height on load. Under other browsers and IE>7 function screenSize() gives me correct height. That's why I can't resize my content properly.
And when I explicitly resize a window, function screenSize() starts to give correct height.
Here some screens before explicit resizing and after it.
screenSize() gives strange height ONLY in IE7.
I am ready to add any extra information to find a reason of this situation.
I hope someone can help me to find out how to define iframe height in IE7. Any help will be useful.
I have a picture that is bigger than the screen and the user is able to scroll left and right on the image. How do I center the image horizontally using javascript or css?
Here is the view:
<div ng-show="isLandscape">
<div ng-if="isSelected(color.code)" ng-repeat="color in colors">
<img id="fullSwatch" ng-src="{{ images.swatches[color.code] }}" full-swatch>
</div>
</div>
Here is my directive:
colorsController.directive('fullSwatch', function() {
return {
restrict: 'A',
link: function(scope, element, attrs) {
element.bind('load', function() {
var img = document.getElementById("fullSwatch");
//swap width and height values because they are before orientation change
var h = Math.max(document.documentElement.clientWidth, window.innerWidth || 0);
var w = Math.max(document.documentElement.clientHeight, window.innerHeight || 0);
var imageWidth = img.width;
var imageHeight = img.height;
var aspectRatio = imageWidth / imageHeight;
// fill image vertically
imageHeight = h;
imageWidth = h * aspectRatio;
img.style.width = imageWidth + "px";
img.style.height = imageHeight + "px";
img.style.maxWidth = "none";
var container = img.parentNode;
var scrollLeft = (imageWidth - w) / 2;
container.scrollLeft = scrollLeft;
});
}
};
});
I have tried adding scroll left to the parent div and on the image itself, but it is not being applied.
div{
position:relative;
overflow-y:hidden;
}
#fullSwatch{
margin:0 auto;
display:table;
}
I also made a Jsfiddle demo for an example using a Google Image
http://jsfiddle.net/x6jDu/
This approach is pretty simple, where any oversized images bigger than the outter div will be centered with horizontal scrolling.Set margin to 0 auto on the image id does the centering trick. Hope this solves your problem.
This is what I need:
The image must completely fill 100% the area the div covers - left to
right and top to bottom.
the image must not be squashed or streched - just be cropped or
must overflow.
The image must be kept as small as possible, so whatever the resize - you
can still see either the very sides OR the very top and bottom.
The div itself will be adjusting in height and width as both are a percentage of the main window.
I have found a little bit of JavaScript here that is manipulating the image just how I want when the window is resized, but is displaying it in the whole window.
<html>
<head>
<title>test</title>
<script type="text/javascript">
function resizeImage()
{
var window_height = document.body.clientHeight
var window_width = document.body.clientWidth
var image_width = document.images[0].width
var image_height = document.images[0].height
var height_ratio = image_height / window_height
var width_ratio = image_width / window_width
if (height_ratio > width_ratio)
{
document.images[0].style.width = "100%"
document.images[0].style.height = "auto"
}
else
{
document.images[0].style.width = "auto"
document.images[0].style.height = "100%"
}
}
</script>
</head>
<body onresize="resizeImage()">
<img onload="resizeImage()" src="f/a.jpg">
</body>
</html>
Here is a demo
Please don't just answer that all I need is:
<img style="width : 100%;">
This is so much more than that.
It's not too easy to explain but check the demo and drag the corner of the window around and that'll be worth 1000 words...!
Can it (or something like it) be made to work the same way within a % sized div?
I wrote a jQuery plugin that does exactly this. Check out my blog post here and the demo here
jQuery.fn.resizeToParent = function(options) {
var defaults = {
parent: 'div'
}
var options = jQuery.extend(defaults, options);
return this.each(function() {
var o = options;
var obj = jQuery(this);
// bind to load of image
obj.load(function() {
// dimensions of the parent
var parentWidth = obj.parents(o.parent).width();
var parentHeight = obj.parents(o.parent).height();
// dimensions of the image
var imageWidth = obj.width();
var imageHeight = obj.height();
// step 1 - calculate the percentage difference between image width and container width
var diff = imageWidth / parentWidth;
// step 2 - if height divided by difference is smaller than container height, resize by height. otherwise resize by width
if ((imageHeight / diff) < parentHeight) {
obj.css({'width': 'auto', 'height': parentHeight});
// set image variables to new dimensions
imageWidth = imageWidth / (imageHeight / parentHeight);
imageHeight = parentHeight;
}
else {
obj.css({'height': 'auto', 'width': parentWidth});
// set image variables to new dimensions
imageWidth = parentWidth;
imageHeight = imageHeight / diff;
}
// step 3 - center image in container
var leftOffset = (imageWidth - parentWidth) / -2;
var topOffset = (imageHeight - parentHeight) / -2;
obj.css({'left': leftOffset, 'top': topOffset});
});
// force ie to run the load function if the image is cached
if (this.complete) {
obj.trigger('load');
}
});
}
And if you want the image to resize when the window is resized, just bind a resize handler to the window:
$(window).resize(function() {
$('img').resizeToParent();
});
Ok I've been playing around with it:
<html>
<head>
<title>test</title>
<style>
#imgarea {
position:absolute;
right:0px;
height:75%;
width:70%;
top:25%;
}
</style>
<script type="text/javascript">
function resizeImage()
{
var window_height = document.body.clientHeight
var window_width = document.body.clientWidth
var image_width = document.images[0].width
var image_height = document.images[0].height
var area_width = window_width * 0.7
var area_height = window_height * 0.75
var height_ratio = image_height / area_height
var width_ratio = image_width / area_width
if (height_ratio > width_ratio)
{
document.images[0].style.width = "100%"
document.images[0].style.height = "auto"
}
else
{
document.images[0].style.width = "auto"
document.images[0].style.height = "100%"
}
}
</script>
</head>
<body onresize="resizeImage()">
<div id="imgarea">
<img onload="resizeImage()" src="f/a.jpg">
</div>
</body>
</html>
It keeps resizing as the div resizes - as mentioned the div is
resizing with the window - this one keeps working seemlesly.
It seems to be OK across IE9, Fire Fox, Oprea, Chrome, and safari
over xp and 7
so really it answers my question perfectly, its just - now i've seen Christian's centering version i wish i had the know-how to make this do it i've tried a few things but am now stuck. Any Ideas?
P.S. if you dont know the width and height % of the div when you right the script i think it could be got with GetElementById - somehow... beyond me though;)
I have an image that I would like to scale to full screen. How would I do this using JavaScript/jQuery? No animation is necessary, just resizing the image.
<img src="something.jpg" onload="scaleToFullScreen()" />
The only reliable solution is to use a formula to determine maximum scale ratio:
var $img = $('#content img'),
imageWidth = $img[0].width, //need the raw width due to a jquery bug that affects chrome
imageHeight = $img[0].height, //need the raw height due to a jquery bug that affects chrome
maxWidth = $(window).width(),
maxHeight = $(window).height(),
widthRatio = maxWidth / imageWidth,
heightRatio = maxHeight / imageHeight;
var ratio = widthRatio; //default to the width ratio until proven wrong
if (widthRatio * imageHeight > maxHeight) {
ratio = heightRatio;
}
//now resize the image relative to the ratio
$img.attr('width', imageWidth * ratio)
.attr('height', imageHeight * ratio);
//and center the image vertically and horizontally
$img.css({
margin: 'auto',
position: 'absolute',
top: 0,
bottom: 0,
left: 0,
right: 0
});
If you have it outside of all elements you can just use css:
<img src="something.jpg" style="width:100%; height:100%" onload="scaleToFullScreen()" />
if you do not:
<img name='myImage' src="something.jpg" onload="onResize()" />
<script>
window.onresize = onResize;
function onResize(e){
var img = var img = document.images.myImage;
if ( img.width > img.height )
img.width = window.innerWidth
else
img.height = window.innerHeight;
}
</script>
You can use viewerjs which is perfict library to able users to browse your images to view fullpage and fullscreen, slide them and view slide between them
check this link :
https://github.com/fengyuanchen/viewerjs
I've a 100*100 <div> in which I would like to display images of different sizes randomly without stretching them.
Note:The image should appear as origional, just resizing should be done inorder to place it in box
Maybe this style will help you:
div {
position:relative;
}
div img {
max-width:100%;max-height:100%;
}
here's a simple function to calculate your aspect ratio and size the image down. it takes the path to the file and the original width and height of the image. you can provide all that however you see fit. 'myElement' would be the id of your image element.
function loadImage(filename, width, height) {
var aspect = width / height;
var w, h;
if (width > height) {
w = 100;
h = Math.round(100 / aspect);
}
else {
h = 100;
w = Math.round(100 * aspect);
}
var element = document.getElementById('myElement');
element.src = filename;
element.style.width = w + 'px';
element.style.height = h + 'px';
}