CSS: Как поместить (и растянуть) несколько изображений в окно просмотра

Question

Я хочу создать простую фотогалерею. Я хочу масштабировать каждую фотографию таким образом, чтобы она имела максимальный размер в окне с учетом ее исходного соотношения.

В настоящее время у меня есть для каждой фотографии в <img> со следующими стилями

html, body { 
    height: 100%; 
}  

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

Это хорошо масштабируется вниз изображения, которые в большой, чтобы поместиться в окне просмотра. Однако, если изображение меньше, чем окно просмотра, оно не растягивается. Любая идея, как я мог бы добавить это растяжение без Javascript?

Я могу только думать о решении, которое требует от меня знать отношение изображения (тогда я могу установить ширину и высоту с использованием значений vh и vw) заранее, и я хотел бы избежать этого. Кроме того, я не люблю устанавливать его как фоновое изображение страницы, охватывающей div, с background-size: cover. Это приведет к глупому разрыву между моими изображениями, если я не знаю отношения изображения.

Любая идея? :) Я знаю, что это, вероятно, невозможно ...

Спасибо!

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(){ 
 
\t initBackgroundResize(); 
 
}); 
 

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

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

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

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

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

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

.bg-stretch{ 
 
\t position: absolute; 
 
\t left: 0; 
 
\t right: 0; 
 
\t top: 0; 
 
\t bottom: 0; 
 
\t overflow: hidden; 
 
\t 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"> 
 
\t <img src="images/bg-body.jpg" alt="" /> 
 
</div>