Bagaimana cara mengubah ukuran gambar agar pas di jendela browser?

114

Ini tampak sepele tetapi setelah semua penelitian dan pengkodean saya tidak bisa membuatnya berfungsi. Ketentuannya adalah:

  1. Ukuran jendela browser tidak diketahui. Jadi tolong jangan usulkan solusi yang melibatkan ukuran piksel absolut.
  2. Dimensi asli gambar tidak diketahui, dan mungkin sudah sesuai atau belum sesuai dengan jendela browser.
  3. Gambar dipusatkan secara vertikal dan horizontal.
  4. Proporsi gambar harus dipertahankan.
  5. Gambar harus ditampilkan secara keseluruhan di jendela (tanpa pemotongan).
  6. Saya tidak ingin scrollbar muncul (dan seharusnya tidak muncul jika gambarnya cocok.)
  7. Gambar secara otomatis mengubah ukuran ketika dimensi jendela berubah, untuk menempati semua ruang yang tersedia tanpa lebih besar dari ukuran aslinya.

Pada dasarnya yang saya inginkan adalah ini:

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

Masalah dengan kode di atas adalah bahwa itu tidak berfungsi: gambar mengambil semua ruang vertikal yang dibutuhkan dengan menambahkan bilah gulir vertikal.

Yang saya miliki adalah PHP, Javascript, JQuery tetapi saya akan membunuh untuk solusi khusus CSS. Saya tidak peduli jika itu tidak berfungsi di IE.

html  css 
— sebnukem
sumber
perraultarchitecte.com/en/projects/… Ini adalah efek yang Anda inginkan, bukan? saya juga!
1
ya itu. Solusi yang telah saya posting di atas bekerja. Anda dapat melihat hasilnya di eseb.net/potos.php?f=best_of/fort_collins_winter.jpg
— sebnukem
Terima kasih, itu sangat membantu saya. Ada saran apa yang bisa saya lakukan untuk menempatkan dua gambar berdampingan, menjaga fungsionalitas pengubahan ukuran? Terima kasih.
9
Saya suka "bukan persyaratan" Anda: "Saya tidak peduli jika itu tidak berfungsi di IE." :)
— Bastian

Jawaban:

122

Perbarui 2018-04-11

Berikut adalah solusi khusus CSS tanpa Javascript . Gambar akan secara dinamis dipusatkan dan diubah ukurannya agar sesuai dengan jendela.

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

Solusi [lainnya, lama], menggunakan JQuery, menyetel tinggi penampung gambar ( bodydalam contoh di bawah) sehingga max-heightproperti pada gambar berfungsi seperti yang diharapkan. Gambar juga akan secara otomatis diubah ukurannya ketika jendela klien diubah ukurannya.

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

Catatan: Pengguna gutierrezalex mengemas solusi yang sangat mirip dengan plugin JQuery di halaman ini.

— sebnukem
sumber
6
Tidak perlu JS, ada solusi khusus CSS .
— Neolisk
Juga tanpa JS, sebagai alternatif gunakan flexbox
— Jason Sturges
51

Berikut adalah solusi hanya CSS sederhana ( JSFiddle ), berfungsi di mana-mana, termasuk seluler dan 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
sumber
2
Bagus. Tapi itu tidak berada di tengah secara vertikal.
— sebnukem
1
@sebnukem: Apakah seharusnya begitu? Entah bagaimana saya melewatkan ini dalam persyaratan. Itulah mengapa orang menggunakan tangkapan layar / mockup. :) PS Saya rasa tidak ada jawaban yang diberikan membuatnya terpusat secara vertikal, bahkan dengan bantuan JS.
— Neolisk
3
Saya sudah mencoba banyak solusi di luar sana, bahkan solusi dari css-trick. Milik Anda bekerja dengan sempurna seperti pesona!
— Stephan
2
Solusi terbaik yang pernah ada!
— iVela
24

CSS3 memperkenalkan unit baru yang diukur relatif terhadap viewport, yang merupakan jendela dalam kasus ini. Ini adalah vhdan vw, yang masing-masing mengukur tinggi dan lebar viewport. Berikut adalah solusi hanya CSS sederhana:

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

Satu-satunya peringatan untuk ini adalah bahwa ini hanya berfungsi jika tidak ada elemen lain yang berkontribusi tinggi pada halaman.

— Max
sumber
Terima kasih, itu bagus. Apakah ada alasan mengapa 100vhtidak membiarkan gambar sesuai tetapi 97vhberfungsi dengan baik?
— Pavel
Mungkin Anda memiliki gambar lain yang memberikan kontribusi tinggi, seperti margin dan bantalan pada bodi? vhsecara harfiah berarti tinggi tampilan, jadi jika ada elemen lain yang menambahkan ketinggian ke laman Anda, seluruh laman akan> 100vh. Apakah itu masuk akal?
— Maksimal
Terima kasih, terselesaikan sekarang. Jika ada yang memiliki masalah yang sama ( .svgfile dirender dengan baik, tetapi mengganti namanya .htmlmenyebabkan ketidakakuratan): browser secara otomatis menambahkan <body>tag dengan default margin:8meskipun file tersebut belum diberi <body>tag. Jadi solusinya adalah menambahkan<style>body{margin:0}</style>
— Pavel
15

Jika Anda ingin meletakkan elemen kontainer di sekitar gambar Anda, solusi CSS murni sederhana. Soalnya, 99% height tidak ada artinya ketika elemen induk akan diperpanjang secara vertikal untuk menampung anaknya. Induk harus memiliki tinggi tetap, katakanlah ... tinggi viewport.

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

Mainkan biola .

— Mark E. Haase
sumber
Bisakah Anda melakukan ini dengan <div>bukan <img>?
— StevoHN
@sebnukem Saya tidak memperhatikan persyaratan itu sebelumnya. Saya telah memperbarui jawaban saya.
— Mark E. Haase
Ini tidak memaksimalkan tinggi gambar lebar saya.
— Sridhar Sarnobat
4

Ubah Ukuran Gambar agar Sesuai dengan Layar pada Sisi Terpanjang dengan mempertahankan Rasio Aspeknya

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

  • width: 100vw - lebar gambar akan 100% dari port tampilan

  • height: auto - tinggi gambar akan diskalakan secara proporsional

  • max-height: 100vw - jika tinggi gambar menjadi lebih dari port tampilan, itu akan dikurangi agar sesuai dengan layar, akibatnya lebar gambar akan berkurang karena properti berikut

  • object-fit: contain - konten yang diganti diskalakan untuk mempertahankan rasio aspeknya sambil menyesuaikan dengan kotak konten elemen

    Catatan: object-fithanya didukung penuh sejak IE 16.0

— am0wa
sumber
1
Solusi seperti itu namun Anda harus menyebutkan bahwa object-fit tidak kompatibel dengan IE11 yang masih banyak digunakan sayangnya.
— Blackbam
@DivijSehgal maka Anda tidak perlu object-fitatau Anda dapat secara eksplisit menggunakan object-fit: fill;yang default .
— am0wa
Bagaimana jika kita ingin memusatkan secara vertikal?
— Fmstrat
Bagaimana jika kita ingin memusatkan secara vertikal? Tambahkan saja: margin: auto;
— kucing
Solusinya bekerja sama dengan html dan gaya tubuh dari jawaban lain: html, body {width: 100%; tinggi: 100%; margin: 0; bantalan: 0; }
— Ivan Kovtun
3

Aturan umum lazy CSS saya:

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

Ini mungkin memperbesar gambar Anda jika awalnya beresolusi rendah (ini berkaitan dengan kualitas gambar dan ukuran dalam dimensi. Untuk memusatkan gambar, Anda juga dapat mencoba (di CSS)

display:block;    
margin: auto 0;

untuk memusatkan gambar Anda

di HTML Anda:

<div class="background"></div>
— usrrname
sumber
3

Saya tahu sudah ada beberapa jawaban di sini, tetapi inilah yang saya gunakan:

max-width: 100%;
max-height: 100vh;
width: auto;
margin: auto;
— TomC
sumber
Saya tidak tahu mengapa, tetapi ini berfungsi seperti pesona. Saya ingin penjelasan!
— SeedyROM
Saya juga tidak, tapi itulah yang saya temukan setelah banyak pencarian.
— TomC
2

Saya memiliki persyaratan serupa, dan harus melakukannya dengan CSS dan JavaScript dasar. Tidak ada JQuery yang tersedia.

Inilah yang saya kerjakan. 

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

Catatan: Saya belum menggunakan 100% untuk lebar gambar karena selalu ada sedikit padding yang harus dipertimbangkan.

— Rohit Vipin Mathews
sumber
2
Dengan CSS 3 kita mendapatkan unit "vh" dan "vw" yang masing-masing merupakan persen viewport-height dan persen viewport-width. cukup img {max-width: 95vw; max-height: 95vh;} mungkin cukup.
— bobpaul
Jika Anda dapat menambahkannya sebagai jawaban mungkin berguna untuk siapa pun yang datang nanti.
— Rohit Vipin Mathews
Anda juga dapat menumpuk banyak gambar di area yang dapat dilihat. Untuk dua gambar, letakkan dua imgtag ke bodydalam halaman dan setel max-heightke 49vh. Menampilkan lebih dari dua gambar di area yang dapat dilihat dibiarkan sebagai latihan bagi pembaca.
— Andrew Beals
2

Sederhanakan. Terima kasih

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

— Hassan Siddiqui
sumber
Terima kasih! hanya menambahkan style = "height: 80vh;" di tag gambar melakukan trik untuk saya.
— Tobias J.
1 
width: 100%;
overflow: hidden;

Saya percaya itu seharusnya berhasil.

— RobinJ
sumber
Hai, terima kasih atas jawaban Anda, tetapi tidak dan tidak dapat berfungsi secara logis saat tinggi gambar lebih besar dari jendela.
— sebnukem
1
Nah ... Apa yang ingin Anda lakukan? Apakah Anda ingin meregangkannya? Atau haruskah proporsi asli dibiarkan utuh (saya menganggap ini yang Anda inginkan)?
— RobinJ
1

Berdasarkan jawaban @ Rohit, ini memperbaiki masalah yang ditandai oleh Chrome, mengubah ukuran gambar dengan andal, dan juga berfungsi untuk beberapa gambar yang ditumpuk secara vertikal, misalnya <img src="foo.jpg"><br><img src="bar.jpg"><br><img src="baz.jpg"> Mungkin ada cara yang lebih elegan untuk melakukan ini. 

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

— Andrew Beals
sumber
0

Gunakan kode ini di tag gaya Anda

<style>
html {
  background: url(imagename) no-repeat center center fixed;
  background-size: cover;
  height: 100%;
  overflow: hidden;
}
</style>
— vaibhav khunt
sumber
Dengan menggunakan situs kami, Anda mengakui telah membaca dan memahami Kebijakan Cookie dan Kebijakan Privasi kami.
Licensed under cc by-sa 3.0 with attribution required.