Як змінити розмір зображення для розміщення у вікні браузера?

114

Це здається тривіальним, але, зрештою, дослідження та кодування я не можу змусити його працювати. Умови такі:

  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.

html  css 
— sebnukem
джерело
perraultarchitecte.com/en/projects/… Це ефект, який ти хочеш, правда? я також!
1
Так. Рішення я опублікував вище робіт. Ви можете побачити результат на eseb.net/potos.php?f=best_of/fort_collins_winter.jpg
— 1111
Дякую, що мені справді допомагає. Будь-які пропозиції, що я можу зробити, щоб розмістити два зображення поруч, зберігаючи функціональність розміру? Дякую.
8
Мені подобається ваша "необов'язковість": "Мені все одно, якщо це не працює в IE." :)
— Бастіан

Відповіді:

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 на цій сторінці.

— sebnukem
джерело
6
Немає необхідності в JS, є лише рішення CSS .
— Неоліск
— Jason Sturges
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.
— Неоліск
3
Я спробував багато рішень там, навіть рішення з css-трюків. Ваш просто чудово працює як шарм!
— Стефан
2
Найкраще рішення будь-коли!
— iVela
24

CSS3 представляє нові одиниці, які вимірюються відносно вікна перегляду, що є вікном у цьому випадку. Це vhі vw, які вимірюють висоту і ширину огляду відповідно. Ось просте рішення CSS:

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

Єдине застереження до цього полягає в тому, що воно працює лише в тому випадку, якщо на сторінці немає інших елементів, що сприяють висоті.

— Макс
джерело
Спасибі, це чудово. Чи є якась причина, чому 100vhзображення не підходить, але 97vhпрацює добре?
— Павло
Можливо, у вас є інші зображення, що сприяють зростанню, такі як накладка і накладка на корпус? vhбуквально означає висоту перегляду, тому якщо будь-які інші елементи додадуть hight на вашу сторінку, вся сторінка буде> 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%;
}

Грайте з скрипкою .

— Марк Е. Хаасе
джерело
Чи можете ви це зробити <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
@DivijSehgal тоді вам не потрібно object-fitабо ви можете явно використовувати те, object-fit: fill;що за замовчуванням .
— am0wa
Що робити, якщо ми хочемо вертикально по центру?
— Фмстрат
Що робити, якщо ми хочемо вертикально по центру? Просто додайте: margin: auto;
— кіт
Рішення працює разом із 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-висота: 95vh;} може бути достатньо.
— bobpaul
Якщо ви можете додати його як відповідь, може бути корисним для кожного, хто прийде до цього пізніше.
— Rohit Vipin Mathews
Ви також можете складати декілька зображень у зоні, яку можна побачити. Для двох зображень помістіть два 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 = "висота: 80vh;" у тезі зображень зробили для мене трюк.
— Тобіас Дж.
1 
width: 100%;
overflow: hidden;

Я вважаю, що слід зробити трюк.

— RobinJ
джерело
Привіт, дякую за вашу відповідь, але це не працює і не може логічно працювати, коли висота зображення більша за вікно.
— sebnukem
1
Ну ... Що ти маєш намір робити? Ви хочете її розтягнути? Або повинні залишатися цілі пропорції (я припускаю, що ви цього хочете)?
— RobinJ
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>
— vaibhav khunt
джерело
Використовуючи наш веб-сайт, ви визнаєте, що прочитали та зрозуміли наші Політику щодо файлів cookie та Політику конфіденційності.
Licensed under cc by-sa 3.0 with attribution required.