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

116

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

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

В основном я хочу вот что:

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

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

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

html css

— себнукем
источник

perraultarchitecte.com/en/projects/… Это тот эффект, который вам нужен, верно? я тоже!

1

Да, это так. Решение, которое я опубликовал выше, работает. Вы можете увидеть результат на eseb.net/potos.php?f=best_of/fort_collins_winter.jpg

— sebnukem

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

9

Мне нравится ваше «необязательное требование»: «Мне все равно, если это не работает в IE». :)

— Bastian

122

Обновление 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.

— себнукем
источник

6

Нет необходимости в JS, есть решение только для CSS .

— Neolisk

Также без JS, в качестве альтернативы используйте flexbox

— Джейсон Стерджес

51

Вот простое решение только для 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>

— Неолиск
источник

2

Ницца. Но он не центрирован по вертикали.

— sebnukem

1

@sebnukem: Это должно было быть? Как-то пропустил это в требованиях. Вот почему люди используют скриншоты / мокапы. :) PS Я не думаю, что какой-либо из предоставленных ответов делает его вертикально центрированным, даже с помощью JS.

— Neolisk

3

Я пробовал много решений, даже решения от css-tricks. Ваш просто прекрасно работает как шарм!

— Стефан

2

Лучшее решение!

— iVela

24

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

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

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

— Максимум
источник

Спасибо, отлично. Есть ли причина, по которой 100vhизображение не подходит, но 97vhработает хорошо?

— Павел

Возможно, у вас есть другие изображения, влияющие на высоту, например поля и отступы на теле? vhбуквально означает высоту просмотра, поэтому, если какие-либо другие элементы увеличивают высоту вашей страницы, вся страница будет> 100vh. Имеет ли это смысл?

— Макс

Спасибо, теперь решено. Если у кого-то такая же проблема ( .svgфайл отображается хорошо, но его переименование .htmlвызывает неточность): браузер автоматически добавляет <body>тег со значением по умолчанию, margin:8даже если файл не имеет <body>тега. Так что решение добавляется<style>body{margin:0}</style>

— Павел

15

Если вы хотите поместить вокруг изображения элемент контейнера, решение на чистом 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%;
}

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

— Марк Э. Хаазе
источник

Можете ли вы сделать это с помощью a <div>вместо <img>?

— StevoHN

@sebnukem Раньше я не замечал этого требования. Я обновил свой ответ.

— Марк Э. Хаасе

Это не увеличивает высоту моего широкого изображения.

— Шридхар Сарнобат

4

Измените размер изображения, чтобы оно соответствовало экрану, по самой длинной стороне, сохраняя его соотношение сторон

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 - заменяемое содержимое масштабируется для сохранения соотношения сторон при размещении в поле содержимого элемента

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

— am0wa
источник

1

Однако, как и в этом решении, вы должны упомянуть, что объектная подгонка несовместима с IE11, который, к сожалению, все еще широко используется.

— Blackbam 05

@DivijSehgal , то вам не нужно object-fitили вы могли бы явно использовать object-fit: fill;который по умолчанию .

— am0wa

Что, если мы хотим центрировать по вертикали?

— Fmstrat

Что, если мы хотим центрировать по вертикали? Просто добавьте: margin: auto;

— cat

Решение работает вместе с html и стилем тела из другого ответа: html, body {width: 100%; высота: 100%; маржа: 0; отступ: 0; }

— Иван Ковтун

3

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

— usrrname
источник

3

Я знаю, что здесь уже есть несколько ответов, но вот что я использовал:

max-width: 100%;
max-height: 100vh;
width: auto;
margin: auto;

— TomC
источник

Понятия не имею, почему, но это работает как шарм. Я хотел бы получить объяснение!

— SeedyROM

Я тоже, но это было то, что я нашел после долгих поисков.

— TomC

2

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

— Рохит Випин Мэтьюз
источник

2

С CSS 3 мы получаем единицы «vh» и «vw», которые представляют собой процентную высоту окна просмотра и процент ширины окна просмотра соответственно. просто img {max-width: 95vw; max-height: 95vh;} может быть достаточно.

— bobpaul

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

— Рохит Випин Мэтьюз,

Вы также можете складывать несколько изображений в видимой области. Для двух изображений поместите два imgтега в тег bodyстраницы и установите max-heightзначение 49vh. Отображение более двух изображений в видимой области оставлено в качестве упражнения для читателя.

— Эндрю Билс

2

Сделай это проще. Спасибо

.bg {
  background-image: url('https://images.unsplash.com/photo-1476820865390-c52aeebb9891?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&w=1000&q=80');
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  height: 100vh;
  width: 100vw;
}

<div class="bg"></div>

Развернуть фрагмент

— Хасан Сиддики
источник

Спасибо! просто добавив style = "height: 80vh;" в теге изображения помогло мне.

— Тобиас Дж.

1

width: 100%;
overflow: hidden;

Я считаю, что это должно помочь.

— РобинДж
источник

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

— sebnukem

1

Что ж ... Что ты собираешься делать? Вы хотите его растянуть? Или следует оставить исходные пропорции нетронутыми (я полагаю, это то, что вам нужно)?

— RobinJ

1

html, body{width: 99%; height: 99%; overflow: hidden}
img.fit{width: 100%; height: 100%;}

Или, может быть, посмотрите это: http://css-tricks.com/how-to-resizeable-background-image/

— Анзе Ярни
источник

2

Это обрезает изображение, поэтому это неприемлемо. Спасибо за ответ.

— sebnukem

1

Основываясь на ответе @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>

Развернуть фрагмент

— Эндрю Билс
источник

0

Используйте этот код в своем теге стиля

<style>
html {
  background: url(imagename) no-repeat center center fixed;
  background-size: cover;
  height: 100%;
  overflow: hidden;
}
</style>

— Вайбхав Кхант
источник