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.
Related
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
I have a div with a variously-sized images in it, which is inside of a parent container.
<div id="parentContainer">
<div id="boxToScale">
<img src="http://placehold.it/350x150" />
<img src="http://placehold.it/150x350" />
<img src="http://placehold.it/200x200" />
<img src="http://placehold.it/50x200" />
</div>
</div>
I need to scale #boxToScale so that it fits inside #parentContainer (both width and height-wise), while all of the images inside of it keep their aspect ratios. All of the images should be scaled at the same factor, and remain on the same line.
Here's a jsfiddle showing the setup: http://jsfiddle.net/32sm4/
I've found lots of stuff for scaling a single image proportionally, but not for scaling a group of images proportionally. I don't know beforehand what the size of the images will be, only the size of #parentContainer.
Javascript/jquery solutions are fine if it can't be done with just css. Thanks!
Edit: Here's (roughly) what I want it to look like after #boxToScale has been scaled:
Updated my answer after I saw your picture how you would your pictures be like.
This is based on this jsfiddle.net/7dpHK/2 (charlietfl commented this on your question). It's almost working like you wanted, but it was bugging because of those 4px borders/paddings around images. There was some confusing CSS too.
So you have to calculate your borders like:
var border = $("#boxToScale img").length * 4;
And then just subtract it from parentW:
parentW = $box.width() - border
Working example.
JS:
var border = $("#boxToScale img").length * 4; // 4px padding around every image
var $box = $('#boxToScale'),
parentW = $box.width() - border,
parentH = $box.height(),
imageTotalW = 0,
imageTotalH = 0,
$imgs = $box.children();
$imgs.each(function () {
var img = $(this),
ht = img.height(),
w = img.outerWidth()
imageTotalW += w;
img.data('w', w);
});
var img_width_ratio = parentW / imageTotalW;
$imgs.each(function (idx) {
var $this = $(this),
$prev = $this.prev();
$this.width($this.outerWidth() * img_width_ratio);
});
DEMO
JS:
function calculateAspectRatioFit(srcWidth, srcHeight, maxWidth, maxHeight) {
var ratio = [maxWidth / srcWidth, maxHeight / srcHeight ];
ratio = Math.min(ratio[0], ratio[1]);
return { width:srcWidth*ratio, height:srcHeight*ratio };
}
imagesInContainer = $("#boxToScale img").length;
var toWidth = $("#parentContainer").width() / imagesInContainer;
var toHeight = $("#parentContainer").height() / imagesInContainer;
$("#boxToScale img").each(function(){
var imageWidth = $(this).width();
var imageHeight = $(this).height();
var getRatio = calculateAspectRatioFit(imageWidth, imageHeight, toWidth, toHeight);
$(this).width(getRatio.width);
$(this).height(getRatio.height);
});
Note: Your 1px border in images may bug this code. See an example here without borders.
#boxToScale {
border: solid blue 1px;
white-space: nowrap;
}
#boxToScale img {
width:20%;
height:auto;
display:inline-block;
}
crazy.. but might work... hope it helps.
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';
}