Jak zmienić rozmiar obrazu, aby zmieścił się w oknie przeglądarki?

114

Wydaje się to trywialne, ale po wszystkich badaniach i kodowaniu nie mogę zmusić go do pracy. Warunki są następujące:

Rozmiar okna przeglądarki jest nieznany. Dlatego prosimy nie proponować rozwiązania obejmującego bezwzględne rozmiary pikseli.
Oryginalne wymiary obrazu są nieznane i mogą, ale nie muszą, już pasować do okna przeglądarki.
Obraz jest wyśrodkowany w pionie i poziomie.
Zachowaj proporcje obrazu.
Obraz musi być wyświetlany w całości w oknie (bez przycinania).
Nie chcę, aby pojawiły się paski przewijania (i nie powinny, jeśli obraz pasuje).
Obraz automatycznie zmienia rozmiar, gdy zmieniają się wymiary okna, aby zająć całą dostępną przestrzeń bez przekraczania rozmiaru oryginalnego.

Zasadniczo chcę tego:

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

Problem z powyższym kodem polega na tym, że nie działa: zdjęcie zajmuje całą potrzebną przestrzeń w pionie, dodając pionowy pasek przewijania.

Do mojej dyspozycji jest PHP, Javascript, JQuery, ale zabiłbym dla rozwiązania tylko CSS. Nie obchodzi mnie, czy to nie działa w IE.

html css sebnukem
źródło

perraultarchitecte.com/en/projects/ ... To jest efekt, którego oczekujesz, prawda? Ja też!

1

Tak to jest. Rozwiązanie, które zamieściłem powyżej, działa. Możesz zobaczyć wynik na eseb.net/potos.php?f=best_of/fort_collins_winter.jpg

sebnukem

Dzięki, to mi naprawdę pomaga. Jakieś sugestie, co mógłbym zrobić, aby umieścić dwa obrazy obok siebie, zachowując funkcję zmiany rozmiaru? Dziękuję Ci.

9

Podoba mi się twoje „nie wymaganie”: „Nie obchodzi mnie, czy to nie działa w IE”. :)

Bastian

122

Aktualizacja 2018-04-11

Oto bez Javascript, tylko CSS . Obraz zostanie dynamicznie wyśrodkowany, a jego rozmiar zostanie dopasowany do okna.

<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>

[Inne, stare] rozwiązanie wykorzystujące JQuery ustawia wysokość kontenera obrazu ( bodyw poniższym przykładzie) tak, aby max-heightwłaściwość obrazu działała zgodnie z oczekiwaniami. Obraz zmieni się również automatycznie po zmianie rozmiaru okna klienta.

<!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>

Uwaga: użytkownik gutierrezalex zapakował bardzo podobne rozwiązanie jako wtyczkę JQuery na tej stronie.

sebnukem
źródło

6

Nie potrzeba JS, jest tylko rozwiązanie CSS .

Neolisk

Również bez JS, alternatywnie użyj flexboksa

Jason Sturges

51

Oto proste rozwiązanie tylko dla CSS ( JSFiddle ), działa wszędzie, w tym na urządzenia mobilne i 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>

Neolisk
źródło

2

Miły. Ale nie jest wyśrodkowany w pionie.

sebnukem

1

@sebnukem: Czy to miało być? Jakoś przegapiłem to w wymaganiach. Dlatego ludzie używają zrzutów ekranu / makiet. :) PS Myślę, że żadna z udzielonych odpowiedzi nie powoduje wyśrodkowania go w pionie, nawet przy pomocy JS.

Neolisk

3

Wypróbowałem wiele rozwiązań, nawet rozwiązania ze sztuczek CSS. Twój po prostu doskonale działa jak urok!

Stephan

2

Najlepsze rozwiązanie w historii!

iVela

24

CSS3 wprowadza nowe jednostki, które są mierzone względem widocznego obszaru, czyli okna w tym przypadku. Są to vhi vw, które mierzą odpowiednio wysokość i szerokość rzutni. Oto proste rozwiązanie tylko dla CSS:

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

Jedynym zastrzeżeniem jest to, że działa tylko wtedy, gdy na stronie nie ma innych elementów wpływających na wysokość.

Maks
źródło

Dzięki, to świetnie. Czy jest jakiś powód, dla którego 100vhobraz nie pasuje, ale 97vhdziała dobrze?

Pavel

Być może masz inne obrazy wpływające na wzrost, takie jak margines i wyściółka na tułowiu? vhdosłownie oznacza wysokość widoku, więc jeśli jakiekolwiek inne elementy zwiększą wysokość Twojej strony, cała strona będzie> 100vh. Czy to ma sens?

Maksymalnie

Dziękuję, rozwiązany teraz. Jeśli ktoś ma ten sam problem ( .svgplik renderuje się dobrze, ale zmiana nazwy na .htmlpowoduje niedokładność): przeglądarka automatycznie dodaje <body>tag z wartością domyślną, margin:8nawet jeśli plik nie ma <body>tagu. Tak więc rozwiązaniem jest dodanie<style>body{margin:0}</style>

Pavel

15

Jeśli chcesz umieścić element kontenera wokół swojego obrazu, proste rozwiązanie CSS jest proste. Widzisz, 99% wysokości nie ma znaczenia, kiedy element nadrzędny będzie się rozciągał w pionie, aby zawierać swoje dzieci. Rodzic musi mieć stałą wysokość, powiedzmy ... wysokość rzutni.

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%;
}

Graj na skrzypcach .

Mark E. Haase
źródło

Czy możesz to zrobić za pomocą <div>zamiast <img>?

StevoHN

@sebnukem Nie zauważyłem wcześniej tego wymogu. Zaktualizowałem odpowiedź.

Mark E. Haase,

Nie powoduje to maksymalizacji wysokości mojego szerokiego obrazu.

Sridhar Sarnobat

4

Zmień rozmiar obrazu, aby dopasować go do ekranu najdłuższym bokiem, zachowując proporcje

img[src$="#fit"] {
    width: 100vw;
    height: auto;
    max-width: none;
    max-height: 100vh;
    object-fit: contain;
}

width: 100vw - szerokość obrazu będzie wynosić 100% portu widoku
height: auto - wysokość obrazu zostanie przeskalowana proporcjonalnie
max-height: 100vw - jeśli wysokość obrazu byłaby większa niż widok portu, zostanie zmniejszona w celu dopasowania do ekranu, w konsekwencji szerokość obrazu zostanie zmniejszona ze względu na następującą właściwość
object-fit: contain - zastępowana zawartość jest skalowana, aby zachować proporcje, dopasowując się do pola zawartości elementu

Uwaga: object-fitjest w pełni obsługiwany tylko od wersji IE 16.0

am0wa
źródło

1

Podobnie jak w przypadku tego rozwiązania, należy jednak wspomnieć, że dopasowanie obiektowe nie jest kompatybilne z IE11, który niestety jest nadal szeroko stosowany.

Blackbam

@DivijSehgal to nie potrzebujesz object-fitlub możesz jawnie użyć tego, object-fit: fill;który jest domyślny .

am0wa

A co jeśli chcemy wyśrodkować w pionie?

Fmstrat

A co jeśli chcemy wyśrodkować w pionie? Wystarczy dodać: margin: auto;

kot

Rozwiązanie działa razem z HTML i stylem body z innej odpowiedzi: html, body {width: 100%; wysokość: 100%; margines: 0; wyściółka: 0; }

Ivan Kovtun

3

Moja ogólna leniwa reguła CSS:

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

Może to spowodować powiększenie obrazu, jeśli ma on niską rozdzielczość (ma to związek z jakością obrazu i rozmiarem w wymiarach. Aby wyśrodkować obraz, możesz również spróbować (w CSS)

display:block;    
margin: auto 0;

wyśrodkować obraz

w twoim HTML:

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

usrrname
źródło

3

Wiem, że jest tu już kilka odpowiedzi, ale oto czego użyłem:

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

TomC
źródło

Nie mam pojęcia dlaczego, ale to działa jak urok. Chciałbym wyjaśnić!

SeedyROM

Ja też nie, ale to właśnie znalazłem po wielu poszukiwaniach.

TomC

2

Miałem podobne wymaganie i musiałem to zrobić podstawowym CSS i JavaScript. Brak dostępnego JQuery.

To jest to, co mam podczas pracy.

<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>

Uwaga: nie użyłem 100% szerokości obrazu, ponieważ zawsze trzeba było wziąć pod uwagę trochę dopełnienia.

Rohit Vipin Mathews
źródło

2

W CSS 3 otrzymujemy jednostki „vh” i „vw”, które są odpowiednio procentami wysokości i szerokości widoku. po prostu img {max-width: 95vw; max-height: 95vh;} może być wystarczające.

bobpaul

Jeśli możesz dodać to jako odpowiedź, może być przydatne dla każdego, kto przyjdzie do tego później.

Rohit Vipin Mathews

W widocznym obszarze można również układać kilka obrazów na sobie. W przypadku dwóch obrazów umieść dwa imgtagi na bodystronie i ustaw max-heightna 49vh. Wyświetlanie więcej niż dwóch obrazów w widocznym obszarze jest pozostawione jako ćwiczenie dla czytelnika.

Andrew Beals,

2

Uprość to. Dzięki

.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>

Rozwiń fragment

Hassan Siddiqui
źródło

dzięki! tylko dodanie style = "height: 80vh;" w tagu obrazu załatwił mi sprawę.

Tobias J.

1

width: 100%;
overflow: hidden;

Uważam, że to powinno załatwić sprawę.

RobinJ
źródło

Cześć, dziękuję za odpowiedź, ale logicznie nie działa i nie może działać, gdy wysokość obrazu jest większa niż okno.

sebnukem

1

Cóż ... Co zamierzasz zrobić? Czy chcesz to rozciągnąć? A może oryginalne proporcje powinny pozostać nienaruszone (zakładam, że tego chcesz)?

RobinJ

1

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

A może sprawdź to: http://css-tricks.com/how-to-resizeable-background-image/

Anze Jarni
źródło

2

To przycina obraz, więc jest to niedopuszczalne. Dziękuję za odpowiedź.

sebnukem

1

Opierając się na odpowiedzi @ Rohit, rozwiązuje to problemy zgłoszone przez Chrome, niezawodnie zmienia rozmiar obrazów, a także działa w przypadku wielu obrazów ułożonych w pionie, np. <img src="foo.jpg"><br><img src="bar.jpg"><br><img src="baz.jpg"> Prawdopodobnie jest na to bardziej elegancki sposób.

<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>

Rozwiń fragment

Andrew Beals
źródło

0

Użyj tego kodu w swoim tagu stylu

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

vaibhav khunt
źródło

Jak zmienić rozmiar obrazu, aby zmieścił się w oknie przeglądarki?

Odpowiedzi: