Auto-resize image to fit the browser - javascript

I have a site which provides "random" pictures of different dimensions, some if not most pictures happen to not fit the browser, so I'd like to know a way to resize it to fit the browser view without scrolling, so why not the guys of Stack Overflow!
Obviously keeping proportions, I tried https://github.com/gutierrezalex/photo-resize/ but didn't work as expected.
So it's a html page with some text, the image in the middle and some other text under it.
All I want is for scrolling to be not able to use since the image should be shrunk enough to do so.

You don't need any JavaScript or hacks to achieve that kind of image scaling – simple CSS and HTML will just work fine. (BTW also on iPad and iPhone.)
You can just place your img with CSS-attribute height:100%; and it will have the height of the father node in the DOM-tree. Make sure, that node (usually a div) will be properly positioned in the browser window.
Try something like this:
<div style="position:fixed; height: 100%; width: 100%; top:0;left 0;">
<img src='whatever.png' style="height: 100%" />
</div>
Check out this page as a demo: andrehelbig.fotograf.de. Here the background image will always scale proportionally to fill the whole browser window (don't get irritated by the JS scrolling).
Hope that gives a little help.

Try this:
div {
width:80vw;
height:80vh;
background:#ccc;
display:table-cell;
vertical-align:middle;
text-align:center;
}
img {
max-width:100%;
height:auto;
max-height:100%;
}
<div>
<img src="http://minisoft.com.bd/uploads/ourteam/rafiq.jpg">
</div>

Old question, but for future googler's, I've written a jQuery plugin which is able to auto-resize images with a lot of options :
https://github.com/GestiXi/image-scale

I Have a simple solution.
add class in image, then use jquery to automaticaly resize the image. here it code :
<img src="" id="imgFitWindowResize">
now use the jquery to initialize auto width when the client resize his browser : here the code :
<script type="text/javascript" language="JavaScript">
function set_body_width() { // set body height = window height
var wh = $(window).width();
$(".imgFitWindowResize").width(wh);
}
$(document).ready(function() {
set_body_width();
$(window).bind('resize', function() { set_body_width(); });
});
</script>
I Try this code it's work :)

can you please try this code. Replace image src by your image source.
<html>
<head>
<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<script>
$(document).ready(function() {
var h = $(window).height();
var w = $(window).width();
document.getElementById('img_canvas').style.height= h +'px';
});
</script>
</head>
<body>
<img id="img_canvas" src="images.jpg" style="width:100%;height:auto;">
</body>
</html>

Related

Javascript resizing a container to an image size

I have a little bit of JS code that is causing me some issues.
I have a div which i called image-window it is using bootstrap class col-xs-8, i need it to hold an image, but the image size is dynamic, so i did was create another container called img-container.
What I am trying to do is make sure that if the image (img-container) is bigger than the image-window then force the img-container to the same size as the image-window.
What i have only works some of the time though ... I think that if the image takes longer to load than the page, it doesn't seem to work and i have to press refresh a few times to get it to properly size it.
Below is what i have, any help would be greatly appreciated.
<script>
$(function () {
var originalWidth = $('#image-window').width();
var img = new Image();
img.src = 'https://websitehere.com/fboQ2uivUPqBqTyi0ZtiPq.jpg';
img.onload = function () {
var newContainerWidth = img.width;
if ( originalWidth >= newContainerWidth ) {
$("#img-container").width( newContainerWidth );
}
};
});
</script>
So if I'm understanding what you want, you shouldn't need any js at all. By default, images just take up their native resolution in width, causing it to be larger than its container. You can easily fix this by seeing a max-width: 100% on the img.
I made an example below. The first img has no max-width setting, but the second one (which is in a container of width 25%) does.
.huge-image-contained {
width: 25%;
}
.huge-image-contained img {
max-width: 100%;
}
<div class="huge-image">
<img src="http://78.media.tumblr.com/f5b9e422f92d6a69974b402f106d58bd/tumblr_n6qzvaD2PO1tddya3o1_1280.jpg"/>
</div>
<div class="huge-image-contained">
<img src="http://78.media.tumblr.com/f5b9e422f92d6a69974b402f106d58bd/tumblr_n6qzvaD2PO1tddya3o1_1280.jpg"/>
</div>
Is there any reason you are not using css to accomplish this?
Built into css is a function as follows:
#idofimage {
width: 100%;
}
#Or use class if this is dynamic
.idofimage {
width: 100%;
}
This will go in your main style.css file which is called in the top of your page by a <meta> tag or simply in a <style> //code </style> fashion.
This will ensure that the image is always 100% of the container width which is your <div> tag the image is put in.
There are many other css styles but using javascript to resize images is technical whilst tools like css make life much easier.

div will not scale with window size, is the jquery stopping it?

All the images on my page are positioned and sized using percentages. This is my first attempt at a fully responsive page. Everything scales down as I adjust the window size except for this one div that holds the testimonials, which also happens to be the only part of the page with jquery that crossfades the testimonials. I opened in IE and the jquery was blocked, so I tried adjusting the window size and it worked correctly. How do I fix this? I tried doing the same thing with css only but it was much more complicated and it also mentioned that it wasn't completely browser compatible.
Here's some code, but I have no idea which part is even the problem. I made it live for you. The images are huge, I need to resize, forgive the amateur hour please.
.slideshow {
background-image:url('images/bubble.png');
background-size:cover;
position:absolute;
top:60%;
right:1%;
}
.slideshow img {
width:100%;
}
<div class="slideshow" style="width:20%">
<img src="images/testimonialzack.png" />
<img src="images/testimonialerica.png" />
</div>
<script type="text/javascript">
$(document).ready(function() {
$('.slideshow').cycle({
fx: 'fade'
});
});
</script>
www.pseudoburbia.com/indextest.html
put width 100% on images and it looked like that solved the problem

Responsive Image without CSS otherwise messes HTML page

I have a responsive web page which inside a Div tag i have an IMG tag as follows:
<div id="frontPage">
<img src="img/bg.jpg" height="500px" width="100%">
</div>
It runs great on desktop, However, Using CSS with #media would be great if i didnt touch this code in the Div tag above. When i comment or delete this code inside the Div tag and use CSS to add the same image using CSS, It appears zoomed in and ugly and not like it is in Plain old Static HTML so its why i am trying to avoid using CSS and instead a different way like using Javascript possibly.
This is the code i use in CSS which comes out ugly:
#frontPage{
max-width: 100%;
height: 450px;
background: url(img/bg.jpg) no-repeat left 0px ;
}
It comes out Zoomed in and ugly and well i tried everything i can including changing the height and width like in the IMG tag and its frustating that it wont come out as it does in the IMG tag in the html code.
Is there any possible way of doing this Using Javascript where the Phseudo code will go ass follow:
<script type="text/javascript">
//Phseudo Code
if (mobileScreenSize == 480){
//Mobile Image
<img src="img/mobileImage.jpg" height="500px" width="100%">
}
else
{
//Regular desktop image
<img src="img/bg.jpg" height="500px" width="100%">
}
</script>
I dont know what else to try, and i want to avoid using the CSS since it doesnt seem or i donnt know how to make it come out as it does using the HTMl IMG tag.
When you want to use CSS to modify the background image, you need to set the "background-size" property. For example,
#frontPage{
max-width: 100%;
height: 450px;
background: url(img/bg.jpg) no-repeat left 0px ;
background-size: 100% 450px;
}
If you want to take the javascript approach, then that's also fine and the way you add an image to a div is by doing something like this.
var elem = document.createElement("img");
elem.setAttribute("src", "img/bg.jpg");
elem.setAttribute("height", "450px");
elem.setAttribute("width", "100%");
document.getElementById("frontPage").appendChild("elem");

Capability to control content of the iframe size through the content's url - javascript to take advantage of this

EDIT: What's right below this has been answered - see the question below it for the current question that has arisen from that answer.
The below code makes the page fit the screen, and I can size the iframe to be any height or width that I want, and the page will not scroll. THis is what I want. However, I don't just want the page to cut the iframe off. I want the iframe to stretch/shrink to fit the browser window. How can I achieve this efficiently? Can it be done without javascript? If javascript is needed for this, please provide a beginner level explanation, or a good tutorial link; I'm new with JS.
Here is what I have so far:
HTML:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="style/style.css">
</head>
<body>
<div class="wrapper">
<iframe id="myIframe" src="https://#.com" border="0" scrolling="no" frameborder="0">
</iframe>
</div>
</body>
</html>
CSS:
body, html {
margin: 0;
padding: 0;
}
.wrapper {
height: 100%;
width: 100%;
overflow: hidden;
position: absolute;
margin: 0;
padding: 0;
}
EDIT! It just so happens that this particular page that I want to use in the iframe here offers a very interesting control feature in the url itself! The url allows size control. So this leads me to ask a new question, which involves using a javascript. My new question is this:
Can I use some sort of JS script to take advantage of the size control here in the url
<iframe id="myIframe" src="https://media.embed.ly/1/frame?url=http%3A%2F%2Fwww.twitch.tv%2Fgamemode_mc_&width=1280&height=1280&secure=true&key=0202f0ddb5a3458aabf520e5ab790ab9&"
to dynamically force the size of the iframe content to match the user's browser window?
This will combine the solution to my original question with a secondary solution to provide the perfect fix for my problem here.
(My goal here is actually to place this Twitch feed as a background to my webpage - resizing the actual content of the iframe is actually a very unlikely but seemingly possibly additional treat here!)
I think what you are attempting to accomplish can be done with the following in tour CSS
#myIframe {
height: 100%;
width: 100%
}
If you are trying to stretch the content of iframe then.....
You will have to write css that will give proportional height and width to all elements in the iframe document
if the iframe href is not from your domain then there is no way to achieve this.
Overall, there is no way to stretch the content of page so that all things are visible on the screen without scrollbar.

Dynamical map size in jquery mobile

How do i set size in 100% for map on page that using jquery mobile?
So far i tried to set height:100%, but that didnt effect, and i still have scroll bars.
If i use height:auto, my map doesnt show
<div id="map_canvas" style="width:100%; height:90%; position:absolute; top:121px;" ></div>
You are getting scroll due to body margin. Just make it 0. I have tested following in firefox
<html>
<body style="margin:0;">
<div id="map_canvas" style="height:100%; background-color: black;"></div>
</body>
</html>
The usual problem with 100% sizing is that the percentage is of the parent element, so that needs to have a size as well (it can be 100%). See this page on Mike Williams' v2 tutorial (the same concept applies to v3).
You didn't provide any context above the map div.
Why dont you just get the height of device and use that...
var viewportHeight = $(window).height();

Categories

Resources