Tarayıcı penceresine sığması için bir görüntü nasıl yeniden boyutlandırılır?

116

Bu önemsiz görünüyor, ancak tüm araştırma ve kodlamalardan sonra onu çalıştıramıyorum. Koşullar şunlardır:

Tarayıcı pencere boyutu bilinmiyor. Bu nedenle, lütfen mutlak piksel boyutlarını içeren bir çözüm önermeyin.
Görüntünün orijinal boyutları bilinmiyor ve tarayıcı penceresine sığabilir veya sığmayabilir.
Görüntü dikey ve yatay olarak ortalanır.
Görüntü oranları korunmalıdır.
Görüntünün tamamı pencerede görüntülenmelidir (kırpılmadan).
Kaydırma çubuklarının görünmesini istemiyorum (ve resim uyuyorsa olmamalılar.)
Görüntü, pencere boyutları değiştiğinde, orijinal boyutundan daha büyük olmadan mevcut tüm alanı kaplayacak şekilde otomatik olarak yeniden boyutlandırılır.

Temelde istediğim şey şu:

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

Yukarıdaki kodla ilgili sorun, çalışmamasıdır: resim, dikey bir kaydırma çubuğu ekleyerek ihtiyaç duyduğu tüm dikey alanı kaplar.

Elimde PHP, Javascript, JQuery var ama sadece CSS içeren bir çözüm için öldürürdüm. IE'de çalışmaması umrumda değil.

html css

— Sebnukem
kaynak

perraultarchitecte.com/en/projects/… İstediğiniz efekt bu, değil mi? ben de!

1

Evet öyle. Yukarıda yayınladığım çözüm çalışmaları. Sonucu

— eseb.net/potos.php?f=best_of/fort_collins_winter.jpg

Teşekkürler, bu bana gerçekten yardımcı oluyor. Yeniden boyutlandırma işlevselliğini koruyarak iki resmi yan yana yerleştirmek için ne yapabileceğime dair herhangi bir öneriniz var mı? Teşekkür ederim.

9

Gereksinimsizliği beğendim: "IE'de çalışmaması umurumda değil." :)

— Bastian

122

Güncelleme 2018-04-11

İşte Javascript içermeyen, yalnızca CSS içeren bir çözüm. Görüntü dinamik olarak ortalanacak ve pencereye sığması için yeniden boyutlandırılacaktır.

<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 kullanan [diğer, eski] çözüm, görüntü kabının yüksekliğini ayarlar ( bodyaşağıdaki örnekte), böylece max-heightgörüntü üzerindeki özellik beklendiği gibi çalışır. İstemci penceresi yeniden boyutlandırıldığında görüntü de otomatik olarak yeniden boyutlandırılacaktır.

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

Not: Kullanıcı gutierrezalex, bu sayfadaki JQuery eklentisine çok benzer bir çözüm paketledi.

— Sebnukem
kaynak

6

JS'ye gerek yok, sadece CSS çözümü var .

— Neolisk

Ayrıca JS olmadan alternatif olarak flexbox kullanın

— Jason Sturges

51

İşte basit bir yalnızca CSS çözümü ( JSFiddle ), her yerde çalışır, mobil ve IE dahil:

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
kaynak

2

Güzel. Ancak dikey olarak ortalanmamış.

— sebnukem

1

@sebnukem: Olması gerekiyor muydu? Her nasılsa gereksinimler konusunda bunu kaçırdım. Bu yüzden insanlar ekran görüntüleri / maketler kullanıyor. :) Not Verilen yanıtların hiçbirinin, JS yardımı ile bile, onu dikey olarak ortalamasını sağladığını düşünmüyorum.

— Neolisk

3

Orada birçok çözümü denedim, hatta css-hilelerinden çözümler bile. Seninki mükemmel bir cazibe gibi çalışıyor!

— Stephan

2

Şimdiye kadarki en iyi çözüm!

— iVela

24

CSS3, bu durumda pencere olan görünüm alanına göre ölçülen yeni birimler sunar. Bunlar vhve vwbu ölçü görünüm yüksekliği ve genişliği, sırasıyla. İşte yalnızca CSS için basit bir çözüm:

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

Bununla ilgili bir uyarı, yalnızca sayfada yüksekliğe katkıda bulunan başka unsurlar yoksa işe yaramasıdır.

— Max
kaynak

Teşekkürler, bu harika. 100vhGörüntünün sığmasına izin vermemesinin ancak 97vhiyi çalışmasının bir nedeni var mı ?

— Pavel

Belki de vücutta kenar boşluğu ve dolgu gibi yüksekliğe katkıda bulunan başka resimleriniz var? vhkelimenin tam anlamıyla görünümün yüksekliği anlamına gelir, bu nedenle başka herhangi bir öğe sayfanıza yükseklik katarsa, sayfanın tamamı> 100vh olacaktır. bu mantıklı mı?

— Maksimum

Teşekkür ederim, şimdi çözüldü. Herhangi biri aynı sorunu yaşıyorsa ( .svgdosya iyi işlenir, ancak .htmlyanlışlığa neden olacak şekilde yeniden adlandırılırsa ): tarayıcı , dosyanın etiketi olmasa bile <body>varsayılan olarak otomatik olarak etiket ekler . Yani çözüm ekliyormargin:8<body><style>body{margin:0}</style>

— Pavel

15

Görüntünüzün etrafına bir kap öğesi koymaya istekliyseniz, saf bir CSS çözümü basittir. Gördüğünüz gibi,% 99 yüksekliğin, üst öğenin alt öğelerini içerecek şekilde dikey olarak genişlemesinin bir anlamı yoktur. Ebeveynin sabit bir yüksekliğe sahip olması gerekir, örneğin ... görüntü alanının yüksekliği.

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

Kemanla oynayın .

— Mark E. Haase
kaynak

Bunu bir <div>yerine a ile yapabilir misin <img>?

— StevoHN

@sebnukem Bu gereksinimi daha önce fark etmemiştim. Cevabımı güncelledim.

— Mark E. Haase

Bu, geniş resmimin yüksekliğini maksimize etmez.

— Sridhar Sarnobat

4

Görüntü Oranını koruyarak En Uzun Kenardan Ekrana Sığacak Şekilde Yeniden Boyutlandırın

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

width: 100vw - görüntü genişliği, görüntü bağlantı noktasının% 100'ü olacaktır
height: auto - resim yüksekliği orantılı olarak ölçeklenecektir
max-height: 100vw - görüntü yüksekliği, görüntü bağlantı noktasından daha fazla olursa ekrana sığacak şekilde azaltılır, dolayısıyla aşağıdaki özellik nedeniyle görüntü genişliği azalır.
object-fit: contain - değiştirilen içerik, öğenin içerik kutusuna sığarken en boy oranını koruyacak şekilde ölçeklenir

Not: object-fityalnızca IE 16.0'dan beri tam olarak desteklenmektedir

— am0wa
kaynak

1

Bu çözüm gibi, ancak nesne uyumunun hala talihsiz bir şekilde yaygın olarak kullanılan IE11 ile uyumlu olmadığını belirtmelisiniz.

— Blackbam

@DivijSehgal sonra ihtiyacınız yoktur object-fitveya varsayılanobject-fit: fill; olanı açıkça kullanabilirsiniz .

— am0wa

Ya dikey olarak ortalamak istersek?

— Fmstrat

Ya dikey olarak ortalamak istersek? Sadece şunu ekleyin: margin: auto;

— kedi

Çözüm, başka bir cevaptan html ve gövde stiliyle birlikte çalışır: html, gövde {genişlik: 100%; yükseklik:% 100; kenar boşluğu: 0; dolgu: 0; }

— Ivan Kovtun

3

Genel tembel CSS kuralım:

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

Başlangıçta düşük çözünürlüklü ise bu, resminizi yakınlaştırabilir (bu, resim kaliteniz ve boyut olarak boyutunuzla ilgilidir. Resminizi ortalamak için (CSS'de) deneyebilirsiniz.

display:block;    
margin: auto 0;

görüntünüzü ortalamak için

HTML'nizde:

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

— usrrname
kaynak

3

Burada zaten birkaç cevap olduğunu biliyorum, ama işte kullandım:

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

— TomC
kaynak

Neden olduğuna dair hiçbir fikrim yok, ama bu harika çalışıyor. Bir açıklama isterim!

— SeedyROM

Ben de değilim, ama birçok araştırmadan sonra bulduğum şey buydu.

— TomC

2

Benzer bir gereksinimim vardı ve bunu temel CSS ve JavaScript yapmak zorunda kaldım. JQuery yok.

Çalıştığım şey bu.

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

Not: Her zaman dikkate alınması gereken bir miktar dolgu olduğundan, görüntü genişliği için% 100 kullanmadım.

— Rohit Vipin Mathews
kaynak

2

CSS 3 ile sırasıyla görüntü alanı yüksekliği yüzdesi ve görüntü alanı genişliği yüzdesi olan "vh" ve "vw" birimlerini elde ederiz. basitçe img {max-width: 95vw; max-height: 95vh;} yeterli olabilir.

— bobpaul

Bir cevap olarak ekleyebilirseniz, buna daha sonra gelen herhangi biri için yararlı olabilir.

— Rohit Vipin Mathews

Ayrıca, görüntülenebilir alana birden çok görüntü yerleştirebilirsiniz. İki görüntüler için, iki koyun imgiçine etiketleri bodysayfa ve setin max-heightiçin 49vh. Görüntülenebilir alanda ikiden fazla görüntünün gösterilmesi okuyucu için bir alıştırma olarak bırakılmıştır.

— Andrew Beals

2

Basitleştir. Teşekkürler

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

Snippet'i genişlet

— Hassan Siddiqui
kaynak

Teşekkürler! sadece stil ekleyerek = "yükseklik: 80vh;" resim etiketinde benim için hile yaptı.

— Tobias J.

1

width: 100%;
overflow: hidden;

Bunun hile yapması gerektiğine inanıyorum.

— RobinJ
kaynak

Merhaba, cevabınız için teşekkürler, ancak görüntü yüksekliği pencereden daha büyük olduğunda mantıksal olarak çalışmaz ve çalışamaz.

— sebnukem

1

Peki ... Ne yapmayı düşünüyorsun? Onu uzatmak ister misin? Yoksa orijinal oranlar bozulmadan bırakılmalı mı (istediğinizin bu olduğunu varsayıyorum)?

— RobinJ

1

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

Ya da belki şuna bir göz atın : http://css-tricks.com/how-to-resizeable-background-image/

— Anze Jarni
kaynak

2

Bu, görüntüyü kırpar, bu nedenle kabul edilemez. Cevap için teşekkürler.

— sebnukem

1

@ Rohit'in cevabına dayanan bu, Chrome tarafından işaretlenen sorunları düzeltir, görüntüleri güvenilir bir şekilde yeniden boyutlandırır ve aynı zamanda dikey olarak yığılmış birden çok görüntü için de işe yarar, örneğin <img src="foo.jpg"><br><img src="bar.jpg"><br><img src="baz.jpg"> , bunu yapmanın muhtemelen daha zarif bir yolu vardır.

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

Snippet'i genişlet

— Andrew Beals
kaynak

0

Bu kodu stil etiketinizde kullanın

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

— vaibhav khunt
kaynak