ब्राउज़र विंडो में फिट होने के लिए छवि का आकार कैसे बदल सकता है?

114

यह तुच्छ लगता है, लेकिन सभी शोध और कोडिंग के बाद मैं इसे काम नहीं कर सकता। शर्तें हैं:

ब्राउज़र विंडो का आकार अज्ञात है। तो कृपया पूर्ण पिक्सेल आकार वाले समाधान का प्रस्ताव न करें।
छवि के मूल आयाम अज्ञात हैं, और ब्राउज़र विंडो में पहले से ही फिट हो भी सकता है और नहीं भी।
छवि लंबवत और क्षैतिज रूप से केंद्रित है।
छवि अनुपात को संरक्षित किया जाना चाहिए।
छवि को खिड़की में इसकी संपूर्णता में प्रदर्शित किया जाना चाहिए (कोई फ़सल नहीं।)
मैं स्क्रॉलबार्स को प्रकट नहीं करना चाहता (और अगर छवि फिट होती है तो उन्हें नहीं करना चाहिए।)
विंडो आयाम बदलने पर छवि अपने आप आकार बदल लेती है, अपने मूल आकार से बड़ा होने के बिना सभी उपलब्ध स्थान पर कब्जा करने के लिए।

मूल रूप से मैं जो चाहता हूं वह यह है:

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

ऊपर दिए गए कोड के साथ समस्या यह है कि यह काम नहीं करता है: एक ऊर्ध्वाधर स्क्रॉल पट्टी जोड़कर तस्वीर को सभी ऊर्ध्वाधर स्थान की आवश्यकता होती है।

मेरे निपटान में PHP, जावास्क्रिप्ट, JQuery है, लेकिन मैं CSS-only समाधान के लिए मारूंगा। मुझे परवाह नहीं है अगर यह IE में काम नहीं करता है।

html css

— sebnukem
स्रोत

perraultelicecte.com/en/projects/… यह वह प्रभाव है जो आप चाहते हैं, है ना? मैं भी!

1

हाँ यही है। इस समाधान मैं ऊपर काम करता है पोस्ट किया है। आप eseb.net/potos.php?f=best_of/fort_collins_winter.jpg

— sebnukem

धन्यवाद, जो वास्तव में मेरी मदद करता है। कोई भी सुझाव जो मैं दो छवियों को साइड में रख सकता हूं, जो कि कार्यक्षमता को व्यवस्थित रखते हुए? धन्यवाद।

8

मुझे आपकी "गैर-आवश्यकता" पसंद है: "मुझे परवाह नहीं है कि क्या यह IE में काम नहीं करता है।" :)

— बैस्टियन

122

अपडेट 2018-04-11

यहां एक जावास्क्रिप्ट-कम, सीएसएस-केवल समाधान है। छवि को गतिशील रूप से केंद्रित किया जाएगा और खिड़की को फिट करने के लिए आकार दिया जाएगा।

<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

जेएस की कोई आवश्यकता नहीं है, एक सीएसएस केवल समाधान है ।

— नियोलिस्क

जेएस के बिना, वैकल्पिक रूप से फ्लेक्सबॉक्स का उपयोग करें

— जेसन स्टर्गेस

51

यहाँ एक सरल सीएसएस केवल समाधान ( JSFiddle ) है, हर जगह काम करता है, मोबाइल और IE शामिल हैं:

सीएसएस 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
स्रोत

2

अच्छा लगा। लेकिन यह लंबवत केंद्रित नहीं है।

— 14

1

@sebnukem: क्या यह होना चाहिए था? किसी तरह मैं आवश्यकताओं में चूक गया। इसलिए लोग स्क्रीनशॉट / मॉकअप का उपयोग करते हैं। :) PS मुझे नहीं लगता कि कोई भी उत्तर प्रदान करता है जो इसे जेएस की मदद से लंबवत केंद्रित बनाता है।

— नियोलिस्क

3

मैंने कई समाधानों की कोशिश की है, यहां तक कि सीएसएस-ट्रिक्स से भी समाधान। तुम्हारा बस एक आकर्षण की तरह पूरी तरह से काम करता है!

— स्टीफन

2

सबसे अच्छा समाधान कभी!

— आइला

24

CSS3 नई इकाइयों को पेश करता है जो व्यूपोर्ट के सापेक्ष मापा जाता है, जो इस मामले में खिड़की है। ये हैं vhऔर vw, जो क्रमशः व्यूपोर्ट ऊंचाई और चौड़ाई को मापते हैं। यहाँ एक सरल सीएसएस केवल समाधान है:

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

यदि आप अपनी छवि के चारों ओर एक कंटेनर तत्व रखना चाहते हैं, तो शुद्ध सीएसएस समाधान सरल है। आप देखें, 99% ऊंचाई का कोई मतलब नहीं है जब मूल तत्व अपने बच्चों को शामिल करने के लिए लंबवत रूप से विस्तारित होंगे। माता-पिता को एक निश्चित ऊंचाई की आवश्यकता है, कहते हैं ... व्यूपोर्ट की ऊंचाई।

एचटीएमएल

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

सीएसएस

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 के साथ संगत नहीं है जो अभी भी व्यापक रूप से दुर्भाग्यपूर्ण रूप से उपयोग किया जाता है।

— ब्लैकबम

@DivijSehgal तब आपको ज़रूरत नहीं है object-fitया आप स्पष्ट रूप से उपयोग कर सकते हैं object-fit: fill;जो डिफ़ॉल्ट है ।

— am0wa

क्या होगा यदि हम लंबवत केंद्र चाहते हैं?

— मम्मट

क्या होगा यदि हम लंबवत केंद्र चाहते हैं? बस जोड़ें: मार्जिन: ऑटो;

— बिल्ली

समाधान HTML और बॉडी स्टाइल के साथ एक और उत्तर से काम करता है: html, बॉडी {चौड़ाई: 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
स्रोत

मुझे पता नहीं क्यों, लेकिन यह एक आकर्षण की तरह काम करता है। मुझे एक स्पष्टीकरण पसंद आएगा!

— सीनियोम

मुझे न तो, लेकिन यह वह था जो मुझे बहुत खोज के बाद मिला।

— TomC

2

मुझे एक समान आवश्यकता थी, और इसे मूल सीएसएस और जावास्क्रिप्ट करना था। कोई 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 {अधिकतम-चौड़ाई: 95vw; अधिकतम ऊंचाई: 95vh;} पर्याप्त हो सकता है।

— बोबापुल

यदि आप इसे उत्तर के रूप में जोड़ सकते हैं तो बाद में आने वाले किसी भी व्यक्ति के लिए उपयोगी हो सकता है।

— रोहित विपिन मैथ्यूज

तुम भी देखने योग्य क्षेत्र में कई छवियों को ढेर कर सकते हैं। दो छवियों के लिए, पृष्ठ 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>

स्निपेट का विस्तार करें

— हसन सिद्दीकी
स्रोत

धन्यवाद! बस शैली जोड़ने = "ऊंचाई: 80vh;" छवि टैग में मेरे लिए चाल चली।

— तोबियों जे।

1

width: 100%;
overflow: hidden;

मेरा मानना है कि चाल चलनी चाहिए।

— RobinJ
स्रोत

नमस्ते, आपके उत्तर के लिए धन्यवाद, लेकिन यह नहीं हो सकता है और तार्किक रूप से काम नहीं कर सकता जब छवि की ऊंचाई खिड़की से अधिक हो।

— 18

1

अच्छा ... यह आप क्या करने का इरादा कर रहे हैं? क्या आप इसे फैलाना चाहते हैं? या वें मूल अनुपात को बरकरार रखा जाना चाहिए (मुझे लगता है कि यह वही है जो आप चाहते हैं)?

— रोबिनज

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

यह छवि को क्रॉप करता है, इसलिए यह स्वीकार्य नहीं है। जवाब के लिए धन्यवाद।

— 19-22

1

@ रोहित के उत्तर पर, यह क्रोम द्वारा चिह्नित किए गए मुद्दों को ठीक करता है, मज़बूती से छवियों का आकार बदलता है, और कई छवियों के लिए भी काम करता है जो लंबवत रूप से स्टैक्ड हैं, जैसे कि <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>

— वैभव खूंट
स्रोत