CSS：如何适应（和拉伸）多个图像到视口

Question

我想创建一个简单的照片库。我想缩放每张照片，使其在窗口中的最大尺寸符合其原始比例。

目前，我为每张照片设置了一个<img>，具有以下样式

html, body {
    height: 100%;
}    

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

这很好地缩小了太大以适合视口的图像。但是，如果图像小于视口，则不会被拉伸。知道如何在没有 Javascript 的情况下添加这种拉伸吗？

我只能想到一个解决方案，它需要我提前知道图像比例（然后我可以使用 vh 和 vw 值设置宽度和高度），我想避免这种情况。另外，我不喜欢将其设置为带有background-size: cover 的跨越 div 的页面的背景图像。如果我不知道图像比例，这会在我的图像之间引入愚蠢的间隙。

有什么想法吗？ :) 我知道这可能是不可能的......

谢谢！

Answer 1

来自您使用的 img 标签：

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

更新：

请注意，下面两张图片的大小相差很大。

<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

这将使您的图像根据屏幕尺寸调整大小

Answer 2

尝试将此样式添加到所有图像：

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

Answer 3

请添加以下js和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>