I am trying to make a "flip book" using jquery and have started with a plugin that I bought.
I customized the JS to get the book to resize to 100% of the window when the browser is resized, and set max sizes because I do not want the images to grow larger than their original size.
With all that said, I have been trying to get the images to retain their aspect ratio when resized. I looked around online but couldn't find anything to help me with this. Does anyone have any ideas on how to accomplish this? Please let me know if you need more info or clarification.
EDIT:
The book element is resized with JS up to the max size of the images.
When the book is resized to anything smaller than its max size, the book's height and width become 100% of the window.
I need some JS to make the book keep its aspect ratio.
EX- window is resized to be very wide (large width) but very short (small height).
Currently the book will stretch and fill the very large width which distorts the image because the height is too small.
How do I make the width scale down to compensate for the small height (and vice versa)?
Thanks to everyone in advance!
Here is the Fiddle
#mybook {
margin:0 auto;
}
body {
overflow:hidden;
}
img {
max-height:300px;
max-width:300px;
}
Look at this code: http://ericjuden.com/2009/07/jquery-image-resize/
$(document).ready(function() {
$('.story-small img').each(function() {
var maxWidth = 100; // Max width for the image
var maxHeight = 100; // Max height for the image
var ratio = 0; // Used for aspect ratio
var width = $(this).width(); // Current image width
var height = $(this).height(); // Current image height
// Check if the current width is larger than the max
if(width > maxWidth){
ratio = maxWidth / width; // get ratio for scaling image
$(this).css("width", maxWidth); // Set new width
$(this).css("height", height * ratio); // Scale height based on ratio
height = height * ratio; // Reset height to match scaled image
width = width * ratio; // Reset width to match scaled image
}
// Check if current height is larger than max
if(height > maxHeight){
ratio = maxHeight / height; // get ratio for scaling image
$(this).css("height", maxHeight); // Set new height
$(this).css("width", width * ratio); // Scale width based on ratio
width = width * ratio; // Reset width to match scaled image
height = height * ratio; // Reset height to match scaled image
}
});
});
Or you could do it with css:
<div style="height: 100px">
<img src="http://www.getdigital.de/images/produkte/t4/t4_css_sucks2.jpg"
style="max-height: 100%; max-width: 100%">
</div>
There is not really enough technical information in your question to be able to give you a good answer, but this is typically a problem that can be solved using CSS. It shouldn't require any JS/jQuery.
The tag naturally keeps the aspect ratio of the image if you set something like:
img {
width: 100%;
height: auto;
}
Alternatively, you could set the image as a background image and use the CSS property
.image {
background-size: contain;
}
to make sure the image uses the most of the available width and height.
As I see, you are resizing with JavaScript the container div of the images. So, you can set the following CSS to make the image always fit in that div and maintain their aspect ratio.
img {
max-height:100%;
max-width:100%;
}
Here is a fiddle.
Related
while resizing div change height based on width with constraint ratio
#example div width:300 and height:600 next Ill change width to 400 height change to 800 based on width
You need to find the current width of the element and then reset its height.
Here's a simple example of doing that. It is using offsetWidth to get the current width, but depending on your use case that may or may not be good enough. See https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/offsetWidth
Typically, offsetWidth is a measurement in pixels of the element's CSS width, including any borders, padding, and vertical scrollbars (if rendered). It does not include the width of pseudo-elements such as ::before or ::after. If the element is hidden (for example, by setting style.display on the element or one of its ancestors to "none"), then 0 is returned.
// Function to set the height of an element proportional to its width
// el is the element we are interested in.
// ratio is the ratio of width to height that we want
function setHeight(el, ratio) {
// first we need to find out what the width of el currently is
const w = el.offsetWidth; //this will always return an integer
console.log(w);
el.style.height = (w * ratio) + 'px';
//note you could also investigate getBoundingClientRect().width for a more general case when there have been transformations
}
<div class="element" style="width: 200px; height: 200px; background-color: magenta;" onclick="setHeight(this, 600/300);">Click me</div>
offsetWidth always returns an integer, and of course there may have been some other calculations which make the width not an integer. Also what if there have been transformations? For a more comprehensive look at dimensions and what they mean see https://developer.mozilla.org/en-US/docs/Web/API/Element/getBoundingClientRect
Is it possible to scale the FONT SIZE of a textarea and maintain its ratio when a browser window is resized?
My requirement: There is an image on the background and on the foreground I'm having a textarea where the user is allowed to add their text. I need to maintain the textarea's position and ratio when the bowser window is resized.
If you use jQuery, then the following code will adjust both the size of the textarea and the size of the font based on the resizing of the window.
Before executing the code, make sure that the size of the textarea and the font size are set (i.e. anything that will change the size of those has loaded and executed).
The font size (including unit) is read from CSS, and updated based on changes in the height of the window; the width is ignored. I doubt you were planning on changing the font aspect ratio.
There are optimisations that could be made (only resizing the dimensions that changed; only changing the font when the window height changes), but I'll leave those to you.
Assumptions:
the initial size of the font is set in CSS
the textarea the ratio of which you want to maintain has an id 'mytextarea'.
function startResizeHandling(){
var textarea = $('#mytextarea');
var initialHeight = textarea.height(),
widthRatio = textarea.width()/$(window).width(),
heightRatio = initialHeight/$(window).height(),
cssFontSize = textarea.css('font-size');
var fontRatio = parseFloat(cssFontSize.match(/^([0-9.]+)/)[1]) / initialHeight,
fontUnit = cssFontSize.match(/^[0-9.]+([a-z]+)$/i)[1];
function handleWindowResize() {
var newWidth = widthRatio * $(window).width(),
newHeight = heightRatio * $(window).height();
textarea.width(newWidth);
textarea.height(newHeight);
textarea.css('font-size', fontRatio * newHeight + fontUnit);
}
$(window).on('resize', handleWindowResize);
};
Edit:
Having re-read the question, it isn't clear to me whether you want to:
scale the font size of a textarea and maintain the ratio of the textarea, or
scale the font size of a textarea and maintain the ratio of the font (i.e. actually distort the font)
This answer addresses the first, not the second.
I am using the ImgViewer v.6 for zooming images (w/IE8 support).
It works fine when the image is wider than taller. However, when an image is taller, the entire height does not display in the container.
http://jsfiddle.net/TheFiddler/wmx05cty/
In this fiddle, you can see the top image has some of its height clipped off.
I need to fill up the viewport with as much of the image as possible without stretching the image. The image needs to remain proportional. The width should be 100%, and a tall image should have the height fit the viewport height as well. The tall image needs to be centered horizontally and its entire width and height visible initially.
So, I modified the plugin to detect the height, and if taller, set the height to the viewport's height.
if (height > width) {
var ratio = $view.height() / height;
ih = $view.height();
iw = width * ratio;
}
This works except that the image is not centered. The math on the viewport and image are not quite right.
http://jsfiddle.net/TheFiddler/qontbr9e/
I need a way to center both images in their containers, display the entire width so that it fills the container, and if it is a taller image, resize it so that the height fits in the container on init.
This is a dynamic application, so I cannot apply styles to individual images. The same script needs to work on both images using the same css. I must use the v.6 version.
Edited: Cleaned up the answer.
So, this solution is a bit messy but it works:
Fiddle for centered only on x
Fiddle for centered on both x and y
In the widget constructor:
this.$oldview = $img.parent(); //store original container element
Then in the update method:
$(this.view).position({
my: "left top",
at: "left top",
of: this.$oldview
});
This shifts the viewport back into position (for some reason the code you added makes the viewport go to absolute(0,0)).
At the end of update, I add an offset to zLeft.
var offsetx = //offset need to horizontally center image
(this.$oldview.width() / 2) -
(((this.zimg).width() / 2) / zoom);
$(this.zimg).css({ //center image
left: zLeft + offsetx + "px"
});
And this at the start of update because it was misbehaving when zoomed out all the way:
if (zoom < 1) {
this.options.zoom = 1;
zoom = 1;
}
I also removed the text-align:center.I think that's all the changes I made.
If you want it centered vertically too, same thing: http://jsfiddle.net/qontbr9e/10/
Same thing but for both x and y:
var offsetx = //offset need to horizontally center image
this.$oldview.width() / 2 -
(this.zimg).width() / 2 / zoom;
var offsety = //offset need to vertically center image
this.$oldview.height() / 2 -
(this.zimg).height() / 2 / zoom;
$(this.zimg).css({ //center image
left: zLeft + offsetx + "px",
top: zTop + offsety + "px"
});
I think, you want to stretch your image to take entire div with. If, i am correct, then you can do this with css. Just set width and height to 100%.
Add this class to your css.
img {
width:100%;
height:100%;
}
JSFiddle: http://jsfiddle.net/wmx05cty/4/
/** EDITED CONTENT **/
If you only wants to stretch(resize) the image to fit to div, which is greater than div height or width, then use this css.
img {
max-width:100% ;
max-height:100%;
}
JSFiddle: http://jsfiddle.net/wmx05cty/6/
Hope, it helps.
You need the max width max height and a margin auto auto;
http://jsfiddle.net/wmx05cty/7/
css :
img {
max-width:100%;
max-height:100%;
margin:auto auto;
}
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.
I want to get the height and width of an image that does not have its width and height tag specified in the HTML source.
ie
<img src="http://www.mysite.com/imge.jpg" id="my_img" />
What I want to do is get the image's width and the height before it loads up. I am trying to achieve the following task, if you know a better solution please suggest me.
I want to do this because I would like to keep all of the images in my site to less than or equal to 600px. So if an image's width > 600px, I reduce it to 600px. Or else I leave its width unchanged.
My tryouts: None of the codes below work for this task, as they get the image's size once the image is loaded; initially they display zero for width.
<script type="text/javascript">
var img = document.getElementById('my_img');
var width = img.clientWidth;
var height = img.clientHeight;
alert('Width: ' + width + ' Height:' + height); // FAIL
var timg = document.getElementById('test').width;
alert(timg); // FAIL too
</script>
My HTML code:
<img src="http://www.mysite.com/imge.jpg" id="my_img" />
Hope this is clear.
Thank you.
jsFiddle
Why use JavaScript? With this CSS rule you can limit the width to 600px:
#my_img { max-width:600px; }