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 / 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.
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./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.
- Are you sure github./gutierrezalex/photo-resize does not work? It works for me: jsfiddle/FHq4y – Denys Kniazhev-Support Ukraine Commented Oct 14, 2012 at 17:05
5 Answers
Reset to default 12You 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..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./GestiXi/image-scale
can you please try this code. Replace image src by your image source.
<html>
<head>
<script src="http://code.jquery./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>
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 :)