CSS: How to fit (and stretch) multiple images to viewport

Question

I want to create a simple photo gallery. I want to scale every photo such that it has its maximum size in the window respecting its original ratio.

Currently, I have for every photo an <img> with the following styles

html, body {
    height: 100%;
}    

img
{
    display:block;
    width:auto;
    height:auto;
    max-width:98%;
    max-height:95%;
}

This nicely scales down images which are to big to fit into the viewport. However, if the image is smaller than the viewport, then it does not get stretched. Any idea how I could add this stretching without Javascript?

I can only think of a solution which requires me to know the image ratio (then I can set width and height using vh and vw values) in advance and I would like to avoid this. Also, I do not like to set it as a background image of a page spanning div with background-size: cover. This would introduce stupid gaps between my images if I do not know the image ratio.

Any idea? :) I know that it is probably not possible....

Thank you!

Joe Kdw · Answer 1 · 2015-02-18T14:38:08.267

2

From the img tag you use:

max-width:98%;
max-height:95%;

UPDATED:

Note that Both images below are far different in size.

<img src="http://appacyber.net/image/bg.jpg" alt="" />
<br />
<br />
<img src="http://appacyber.net/image/live-chat-img.png" alt="" />

<style>
img {
    border:0px;
    border:none;
    width:95%!important;
    height:95%!important;
}
</style>

Demo HERE

this would let your image resized based on screen size

edited Feb 18 '15 at 14:38

answered Feb 18 '15 at 14:18

Joe Kdw

2,245
1
21
38

But image will resize un-propertionally. Use min-height and height:auto. you can set width for width or height only and set auto property for another – Ram kumar Feb 18 '15 at 14:29
Thank you for your effort. Is there any way that it also adepts to the height of the viewport and keeps the ratio? In your demo, the width is always 95% and the height is over 100% if the frame is too narrow. If I add height: 100% to body and html tags then the aspect ratio is not kept: [link](https://jsfiddle.net/1qgn1ag7/2/) – cbaumann Feb 18 '15 at 16:21

score 0 · Answer 2 · answered Feb 18 '15 at 14:24

0

Try to add this style to all images:

<style>
img {max-width:100%;
height:auto;
} 
</style>

answered Feb 18 '15 at 14:24

dbd

159
6

score 0 · Answer 3 · answered Feb 19 '15 at 10:33

Please add following js and css

// page init
jQuery(function(){
 initBackgroundResize();
});

// stretch background to fill blocks
function initBackgroundResize() {
 jQuery('.bg-stretch').each(function() {
  ImageStretcher.add({
   container: this,
   image: 'img'
  });
 });
}

/*
 * Image Stretch module
 */
var ImageStretcher = {
 getDimensions: function(data) {
  // calculate element coords to fit in mask
  var ratio = data.imageRatio || (data.imageWidth / data.imageHeight),
   slideWidth = data.maskWidth,
   slideHeight = slideWidth / ratio;

  if(slideHeight < data.maskHeight) {
   slideHeight = data.maskHeight;
   slideWidth = slideHeight * ratio;
  }
  return {
   width: slideWidth,
   height: slideHeight,
   top: (data.maskHeight - slideHeight) / 2,
   left: (data.maskWidth - slideWidth) / 2
  };
 },
 getRatio: function(image) {
  if(image.prop('naturalWidth')) {
   return image.prop('naturalWidth') / image.prop('naturalHeight');
  } else {
   var img = new Image();
   img.src = image.prop('src');
   return img.width / img.height;
  }
 },
 imageLoaded: function(image, callback) {
  var self = this;
  var loadHandler = function() {
   callback.call(self);
  };
  if(image.prop('complete')) {
   loadHandler();
  } else {
   image.one('load', loadHandler);
  }
 },
 resizeHandler: function() {
  var self = this;
  jQuery.each(this.imgList, function(index, item) {
   if(item.image.prop('complete')) {
    self.resizeImage(item.image, item.container);
   }
  });
 },
 resizeImage: function(image, container) {
  this.imageLoaded(image, function() {
   var styles = this.getDimensions({
    imageRatio: this.getRatio(image),
    maskWidth: container.width(),
    maskHeight: container.height()
   });
   image.css({
    width: styles.width,
    height: styles.height,
    marginTop: styles.top,
    marginLeft: styles.left
   });
  });
 },
 add: function(options) {
  var container = jQuery(options.container ? options.container : window),
   image = typeof options.image === 'string' ? container.find(options.image) : jQuery(options.image);

  // resize image
  this.resizeImage(image, container);

  // add resize handler once if needed
  if(!this.win) {
   this.resizeHandler = jQuery.proxy(this.resizeHandler, this);
   this.imgList = [];
   this.win = jQuery(window);
   this.win.on('resize orientationchange', this.resizeHandler);
  }

  // store item in collection
  this.imgList.push({
   container: container,
   image: image
  });
 }
};

.bg-stretch{
 position: absolute;
 left: 0;
 right: 0;
 top: 0;
 bottom: 0;
 overflow: hidden;
 z-index: -1;
}

<!-- required stylesheets and scripts -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>

<!-- background stretcher structure example -->
<div class="bg-stretch">
 <img src="images/bg-body.jpg" alt="" />
</div>

CSS: How to fit (and stretch) multiple images to viewport

3 Answers3