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

Question

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

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

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

в основном то, что я хочу, это:

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

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

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

9 73

html css

9 ответов:

вот простой 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>

34

CSS3 вводит новые единицы измерения, которые измеряются относительно окна просмотра, которое в данном случае является окном. Это vh и vw, которые измеряют высоту и ширину видового экрана соответственно. Вот простой CSS только решение:
img {
    max-width: 100%;
    max-height: 100vh;
    height: auto;
}
одно предостережение заключается в том, что он работает только в том случае, если на странице нет других элементов, способствующих высоте.

15

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

HTML

<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%;
}
сыграет с скрипка.

11

мое общее ленивое правило 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>

1

изменить размер изображения, чтобы соответствовать экрану по самой длинной стороне, сохраняя его соотношение сторон
img[src$="#fit"] {
    width: 100vw;
    height: auto;
    max-width: none;
    max-height: 100vh;
    object-fit: contain;
}
width: 100vw - ширина изображения будет 100% от порта просмотра

height: auto - высота изображения будет масштабироваться пропорционально

max-height: 100vw - Если высота изображения станет больше, чем порт просмотра, он будет уменьшен, чтобы соответствовать экрану, следовательно, ширина изображения будет уменьшена из-за следующего свойства

object-fit: contain - the замененное содержимое масштабируется, чтобы сохранить его соотношение сторон при установке в поле содержимого элемента

Примечание: object-fit полностью поддерживается только с IE 16.0

1

width: 100%;
overflow: hidden;
Я считаю, что это должно сделать трюк.

0

html, body{width: 99%; height: 99%; overflow: hidden}
img.fit{width: 100%; height: 100%;}
или может это проверить: http://css-tricks.com/how-to-resizeable-background-image/

0

У меня было аналогичное требование, и мне пришлось сделать его базовым 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% для ширины изображения, так как всегда нужно было учитывать немного заполнения.

0

sebnukem · Accepted Answer · 2018-04-20 17:38:00

обновление 2018-04-11

вот Javascript-менее, только CSS решение. Изображение будет динамически центрироваться и изменяться в соответствии с размером окна.
<html>
 <head>
  <style>
  * {
   margin: 0;
   padding: 0;
  }
  .imgbox {
   display: grid;
   height: 100%;
  }
  .center-fit {
   max-width: 100%;
   max-height: 100vh;
   margin: auto;
  }
  </style>
 </head>
 <body>
  <div class="imgbox">
   <img class="center-fit" src='pic.png'>
  </div>
 </body>
</html>
[другое, старое] решение, используя 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 на этой странице.