CODEWITHSUNDEEP
htmlcssimage-scaling
cbaumann
cbaumann

Reputation: 31

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

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!

Upvotes: 3

Views: 2606

Answers (3)

Ram kumar
Ram kumar

Reputation: 3162

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>

Upvotes: 0

Joe Kdw
Joe Kdw

Reputation: 2261

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

Upvotes: 2

dbd
dbd

Reputation: 159

Try to add this style to all images:

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

Upvotes: 0

Related Questions