Проблема максимальной высоты (и соотношения сторон) в Chrome, когда я хочу создать галерею изображений с плавающей высотой

Несколько недель назад я работал на этом сайте. Это мой следующий сайт портфолио. Я хочу сделать эту структуру, когда я закончу:

  • заголовок
  • Горизонтальная галерея изображений с плавающей высотой
  • нижний колонтитул

Я хочу создать что-то похожее, например, портфолио сайтов 22slides.com для фотографов. Если вы измените размер окна вашего браузера или нажмете кнопку полного экрана, элемент img или div изображения автоматически изменят его высоту.

Я добавил в CSS параметр "max-height", чтобы изображения никогда не становились больше, чем их исходное разрешение. Это серьезная проблема на экранах с огромным разрешением. но в Chrome он не работает должным образом, потому что пропорции становятся неправильными. Если нажать полноэкранный режим, соотношение сторон более плохое. В любом другом последнем браузере (Firefox, Safari, Opera, IE8-9) работает нормально. С помощью этой команды я создал обычный CSS только для Chrome (но теперь я раскомментировал это в HTML, чтобы показать вам проблему с соотношением сторон Chrome):

#portfolio img { max-height: none; }

Таким образом, с этой линией изображения, использующие максимально возможную высоту в Chrome и пропорции, являются правильными. Но это проблема для меня. Я не хочу, чтобы изображение размером 1024x683px показывало больше, чем его реальное разрешение на мониторе FullHD.

Я думаю, что лучшее решение, если есть JavaScript, который динамически описывает ширину и высоту для каждого изображения и сохраняет исходное соотношение сторон. 22slides.com использует нечто похожее на javascript, но я вовсе не программист javascript.:(

Структура HTML изображений:

<div id="portfolio">
    <img src="image1.jpg" alt="" />
    <img src="image2.jpg" alt="" />
</div>

CSS (max-height - это очень маленькое число, просто чтобы показать вам проблему в Chrome):

#portfolio { white-space: nowrap; float: left; }
#portfolio img { height: 100%; width: auto !important; min-height: 150px; max-height: 350px; }

Я использую этот Jquery Javascript для динамического изменения высоты изображения и восстановления переполнения изображения на экране с отрицательной высотой 130px. Вероятно, не этот скрипт вызывает проблему, потому что, если я его выключу, соотношение сторон в Chrome будет хуже:

// Dynamical vertical resizing on images and Correct the height (to not overflow the screen)
$(document).ready(function(){
    $(window).load(function(){ // On load
    $('#portfolio img').css({'height':(($(window).height())-130)+'px'}); // Adjust the number if you change something in CSS
    });
    $(window).resize(function(){ // On resize
    $('#portfolio img').css({'height':(($(window).height())-130)+'px'}); // Adjust the number if you change something in CSS
    });
});

Мне нужна помощь! Благодарю вас!

Обновить:

Этот javascript, написанный "Emphram Stavanger" и "nick_w", кажется, решает мою проблему соответствия изображения высоте браузера: Imagefit вертикально

Я пытался, и он отлично работает с одним изображением. Изображение отлично вписывается в имеющееся окно просмотра, с правильным соотношением сторон! "Эмпрам Ставангер" наглядно объясняет нашу проблему: http://www.swfme.com/view/1064342

Демонстрация JsFiddle (в основном это код Emphram Stavanger, я только что внес изменения в nick_W, изменил Jquery на последний и вставил после ссылки show:

http://jsfiddle.net/YVqAW/show/

Я еще не пробовал с горизонтальной прокруткой изображений на сайте, но это уже большой шаг!

ОБНОВЛЕНИЕ 2:

РЕШЕНИЕ: https://stackru.com/questions/20303672/horizontal-image-slideshow-javascript-not-working-properly-with-portrait-oriente

(И мне снова нужна помощь...):)

Источник

1 ответ

Немного поздно, но вы можете использовать div с background-image и установить background-size: serve вместо тега img:

div.image{
    background-image: url("your/url/here");
    background-size:contain;
    background-repeat:no-repeat;
    background-position:center;
}

Теперь вы можете просто установить свой размер div так, как вам нравится, и изображение не только сохранит пропорции, но и будет централизовано как по вертикали, так и по горизонтали.

Свойство background-size равно ie>=9.

Источник
Другие вопросы по тегам