CODEWITHSUNDEEP
javascripthtmlimageautoresize
chauffer
chauffer

Reputation: 608

Auto-resize image to fit the browser

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.

Upvotes: 2

Views: 38657

Answers (5)

Rafiqul Islam
Rafiqul Islam

Reputation: 961

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>

Upvotes: 1

Stephan Hepper
Stephan Hepper

Reputation: 430

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.

Upvotes: 12

Mahendra Wardana
Mahendra Wardana

Reputation: 1

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 :)

Upvotes: -1

Bharat karotra
Bharat karotra

Reputation: 132

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>

Upvotes: -1

Nicolas BADIA
Nicolas BADIA

Reputation: 5852

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

Upvotes: 0

Related Questions