Как изменить размер изображения, чтобы оно поместилось в окне браузера? - PullRequest
Новая
       2

Как изменить размер изображения, чтобы оно поместилось в окне браузера?

89 голосов
/ 29 мая 2011

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

  1. Размер окна браузера неизвестен.Поэтому, пожалуйста, не предлагайте решение, включающее абсолютные размеры в пикселях.
  2. Исходные размеры изображения неизвестны, и могут уже соответствовать или не соответствовать размеру окна браузера.
  3. Изображение центрировано по вертикали и горизонтали..
  4. Пропорции изображения должны быть сохранены.
  5. Изображение должно полностью отображаться в окне (без кадрирования.)
  6. Я не хочу, чтобы появлялись полосы прокрутки (и не должны, если изображение подходит.)
  7. Изображение автоматически изменяется при изменении размеров окна, чтобы занимать все доступное пространство, не превышая его первоначальный размер.

По сути, я хочу вот что: 

.fit {
  max-width: 99%;
  max-height: 99%;
}
<img class="fit" src="pic.png">

Проблема с кодом выше заключается в том, что он не работает: рис занимает все необходимое вертикальное пространство, добавляя вертикальную полосу прокрутки.

В моем распоряжении PHP, Javascript, JQuery, но я бы убил для решения только для CSS.Мне все равно, если это не работает в IE.

Ответы [ 11 ]

0 голосов
/ 25 марта 2019

Опираясь на ответ @ Rohit, это исправляет проблемы, помеченные Chrome, надежно изменяет размеры изображений, а также работает с несколькими изображениями, расположенными вертикально, например <img src="foo.jpg"><br><img src="bar.jpg"><br><img src="baz.jpg"> Возможно, существует более элегантный способ сделать это.

<style>
    img {
        max-width: 99vw !important;
        max-height: 99vh !important;
    }
</style>
<script>
    function FitImagesToScreen() {
        var images = document.getElementsByTagName('img');
        if(images.length > 0){
            document.styleSheets[1].rules[0].style["max-height"]=((100/images.length)-1)+"vh";
            for(var i=0; i < images.length; i++){
                if(images[i].width >= (window.innerWidth - 10)){
                    images[i].style.width = 'auto';
                }
            }
        }
    }
</script>
</HEAD>
<BODY onload='FitImagesToScreen()' onresize='FitImagesToScreen()'>
<img src="foo.png">
</BODY>
Страница:
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...