Как изменить размер изображения в окне браузера?

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

  • Размер окна браузера неизвестен. Поэтому, пожалуйста, не предлагайте решение с абсолютными размерами пикселей.
  • Я не хочу появляться полосы прокрутки (и они не должны, если изображение подходит.)
  • Изображение может или не может соответствовать окну браузера. Он всегда сосредоточен.
  • Соотношения изображений должны быть сохранены.
  • Изображение должно отображаться полностью в окне (без обрезки).

В принципе, я хочу:

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

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

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

Спасибо

Вот текущее лучшее решение, которое у меня есть, с использованием JQuery, вдохновленное ответом gutierrezalex ниже. Идея состоит в том, чтобы дать высоту контейнеру изображения, чтобы max-height работал как ожидалось:

<!DOCTYPE html>
<html>
<head>
<style>
* {
  padding: 0;
  margin: 0;
}
.fit {
  max-width: 100%;
  max-height: 100%;
}
.center {
  display: block;
  margin: auto;
}
</style>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript" language="JavaScript">
function set_body_height()
{
    var wh = $(window).height();
    $('body').attr('style', 'height:' + wh + 'px;');
}
$(document).ready(function() {
    set_body_height();
    $(window).bind('resize', function() { set_body_height(); });
});
</script>
</head>
<body>
<img id="the_pic" class="center fit" src="pic.jpg" >    
</body>
</html>

ОТВЕТЫ

Ответ 1

Решение, используя JQuery, заключается в том, чтобы установить высоту в контейнер изображения (body в приведенном ниже примере), чтобы свойство max-height на изображении работало, как ожидалось. Изображение также будет автоматически изменяться при изменении размера окна клиента.

<!DOCTYPE html>
<html>
<head>
<style>
  * {
    padding: 0;
    margin: 0;
  }
  .fit { /* set relative picture size */
    max-width: 100%;
    max-height: 100%;
  }
  .center {
    display: block;
    margin: auto;
  }
</style>
</head>
<body>

<img class="center fit" src="pic.jpg" >    

<script src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript" language="JavaScript">
  function set_body_height() { // set body height = window height
    $('body').height($(window).height());
  }
  $(document).ready(function() {
    $(window).bind('resize', set_body_height);
    set_body_height();
  });
</script>

</body>
</html>

Примечание. Пользователь gutierrezalex упаковал очень похожее решение как плагин JQuery на этой странице.

Ответ 2

Вот простое решение только для CSS (JSFiddle), работает везде, включая мобильный и IE:

CSS 2.0:

html, body {
    height: 100%;
    margin: 0;
    padding: 0;
}

img {
    padding: 0;
    display: block;
    margin: 0 auto;
    max-height: 100%;
    max-width: 100%;
}

HTML:

<body>
  <img src="images/your-image.png" />
</body>

Ответ 3

CSS3 вводит новые единицы измерения, которые измеряются относительно окна просмотра, который является окном в этом случае. Это vh и vw, которые измеряют высоту и ширину видового экрана соответственно. Вот простое решение только для CSS:

img {
    max-width: 100%;
    max-height: 100vh;
    height: auto;
}

Остерегайтесь того, что он работает только в том случае, если на странице нет других элементов, способствующих росту.

Ответ 4

Если вы хотите поместить элемент контейнера вокруг своего изображения, простое решение CSS просто. Видите ли, высота 99% не имеет значения, когда родительский элемент будет вертикально перемещаться, чтобы содержать его дочерние элементы. Родитель должен иметь фиксированную высоту, например... высоту области просмотра.

HTML

<!-- use a tall image to illustrate the problem -->
<div class='fill-screen'>
    <img class='make-it-fit' 
         src='https://upload.wikimedia.org/wikipedia/commons/f/f2/Leaning_Tower_of_Pisa.jpg'>
</div>

CSS

div.fill-screen {
    position: fixed;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    text-align: center;
}

img.make-it-fit {
    max-width: 99%;
    max-height: 99%;
}

Играйте с скрипкой.

Ответ 5

Мое общее правило ленивого CSS:

.background{
width:100%;
height:auto;
background: url('yoururl.jpg') no-repeat center;
background-position: 50% 50%;
background-size: 100% cover!important;
overflow:hidden;
}

Это может увеличить изображение, если оно начинается с низкого разрешения (что связано с качеством и размером изображения в размерах. Чтобы центрировать свое изображение, вы также можете попробовать (в CSS)

display:block;    
margin: auto 0;

чтобы центрировать ваше изображение

в вашем HTML:

<div class="background"></div>

Ответ 6

width: 100%;
overflow: hidden;

Я считаю, что это должно сделать трюк.

Ответ 8

У меня было аналогичное требование, и мне пришлось сделать это в основном CSS и JavaScript. Нет JQuery.

Вот что я получил.

<html>
      <head>
            <style>
                   img {
                          max-width: 95% !important;
                          max-height: 95% !important;
                       }
            </style>
            <script>
                   function FitImagesToScreen() {
                      var images = document.getElementsByTagName('img');
                      if(images.length > 0){
                         for(int i=0; i < images.length; i++){
                             if(images[i].width >= (window.innerWidth - 10)){
                                 images[i].style.width = 'auto';
                               }
                            }
                         }
             </script>
      </head>
      <body onload='FitImagesToScreen()'>
      ----    
      </body>
</html>

Примечание. Я не использовал 100% для ширины изображения, так как всегда было немного отступов, которые нужно учитывать.