ব্রাউজার উইন্ডোতে ফিট করার জন্য কোনও চিত্রকে কীভাবে পুনরায় আকার দিন?

114

এটি তুচ্ছ মনে হলেও সমস্ত গবেষণা এবং কোডিংয়ের পরেও আমি এটি কাজ করতে পারি না। শর্তগুলি হ'ল:

ব্রাউজার উইন্ডো আকার অজানা। সুতরাং দয়া করে পরম পিক্সেল মাপের সাথে সম্পর্কিত কোনও সমাধান প্রস্তাব করবেন না।
চিত্রটির মূল মাত্রা অজানা এবং এটি ব্রাউজার উইন্ডোতে ইতিমধ্যে ফিট করতে পারে বা নাও পারে।
চিত্রটি উল্লম্ব এবং অনুভূমিকভাবে কেন্দ্রিক।
চিত্র অনুপাত অবশ্যই সংরক্ষণ করা উচিত।
চিত্রটি অবশ্যই পুরোপুরি উইন্ডোতে প্রদর্শিত হবে (ক্রপিং নেই))
আমি স্ক্রোলবারগুলি উপস্থিত হওয়ার ইচ্ছা করি না (এবং চিত্রটি মানানসই তাদের উচিত নয়))
উইন্ডোটির মাত্রাগুলি পরিবর্তিত হয়ে আসল আকারের চেয়ে বড় না হয়ে সমস্ত উপলভ্য স্থান দখল করতে ইমেজটি স্বয়ংক্রিয়ভাবে আকার পরিবর্তন করে।

মূলত আমি যা চাই তা হ'ল:

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

উপরের কোডটিতে সমস্যাটি হ'ল এটি কাজ করে না: উল্লম্ব স্ক্রোল বার যুক্ত করে ছবিটি প্রয়োজনীয় সমস্ত উল্লম্ব স্থান নেয়।

আমার নিষ্পত্তিতে পিএইচপি, জাভাস্ক্রিপ্ট, জিকুয়েরি তবে আমি সিএসএস-কেবলমাত্র সমাধানের জন্য হত্যা করব। এটি আই-তে কাজ না করে কিনা আমি পাত্তা দিই না।

html css

— sebnukem
সূত্র

perraultarchitecte.com/en/projects/… এটি আপনি চান প্রভাব, ডান? আমিও!

1

হ্যাঁ এই সমাধানটি আমি উপরের কাজগুলি পোস্ট করেছি। ফলাফলটি আপনি eseb.net/potos.php?f=best_of/fort_collins_winter.jpg

— 2:25

ধন্যবাদ, এটি সত্যিই আমাকে সাহায্য করে। পুনরায় আকারের কার্যকারিতা রেখে, দুটি চিত্র পাশাপাশি রাখার জন্য আমি কী করতে পারি? ধন্যবাদ.

8

আমি আপনার "অ-প্রয়োজনীয়তা" পছন্দ করি: "এটি আই-তে কাজ না করে যদি আমি যত্ন করি না।" :)

— বাস্তিয়ান

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>

[অন্যান্য, পুরাতন] সমাধান, জিউকিরি ব্যবহার করে চিত্রের ধারকটির উচ্চতা নির্ধারণ করে ( 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>

দ্রষ্টব্য: ব্যবহারকারী গুতেরেজালেক্স এই পৃষ্ঠায় একটি জিকুয়েরি প্লাগইন হিসাবে একটি খুব অনুরূপ সমাধান প্যাকেজ করেছে।

— sebnukem
সূত্র

6

জেএসের দরকার নেই, কেবলমাত্র একটি সিএসএস সমাধান রয়েছে ।

— নিওলিস্ক

জেএস ছাড়াও বিকল্পভাবে ফ্লেক্সবক্স ব্যবহার করুন

— জেসন

51

এখানে একটি সাধারণ সিএসএস সলিউশন ( জেএসফিডাল ) রয়েছে, সর্বত্র কাজ করে, মোবাইল এবং আইই অন্তর্ভুক্ত রয়েছে:

সিএসএস 2.0:

html, body {
    height: 100%;
    margin: 0;
    padding: 0;
}

img {
    padding: 0;
    display: block;
    margin: 0 auto;
    max-height: 100%;
    max-width: 100%;
}

এইচটিএমএল:

<body>
  <img src="images/your-image.png" />
</body>

— Neolisk
সূত্র

2

খুশী হলাম। তবে এটি উল্লম্বভাবে কেন্দ্রিক নয়।

— sebnukem

1

@ সেব্নুকেম: এটা কি হওয়ার কথা ছিল? একরকমভাবে আমি এটি প্রয়োজনে মিস করেছি। এজন্য লোকেরা স্ক্রিনশট / মকআপগুলি ব্যবহার করে। :) পিএস, আমি মনে করি না যে সরবরাহ করা জবাবগুলি জেএস সহায়তায় এমনকি উল্লম্বভাবে কেন্দ্রীভূত হয়।

— নিওলিস্ক

3

আমি অনেক সমাধান এখানে চেষ্টা করেছি, এমনকি সিএসএস-কৌশলগুলি থেকে সমাধানও solutions আপনার পুরোপুরি নিখুঁতভাবে কাজ করে!

— স্টিফান

2

সর্বকালের সেরা সমাধান!

— আইভেলা

24

সিএসএস 3 নতুন ইউনিটগুলি উপস্থাপন করে যা ভিউপোর্টের তুলনায় পরিমাপ করা হয়, যা এই ক্ষেত্রে উইন্ডো। এগুলি vhএবং vw, যা যথাক্রমে ভিউপোর্টের উচ্চতা এবং প্রস্থ পরিমাপ করে। এখানে একটি সহজ সিএসএস সমাধান রয়েছে:

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

এটির পক্ষে একটি সতর্কতা হ'ল পৃষ্ঠায় উচ্চতা অবদান রাখার কোনও উপাদান নেই it

— ম্যাক্স
সূত্র

ধন্যবাদ, দুর্দান্ত। 100vhইমেজটি ফিট হতে দেয় না তবে এটি কি ভাল কাজ করার কোনও কারণ 97vh?

— পাভেল

সম্ভবত আপনার অন্যান্য চিত্র যেমন উচ্চতা অবদান রাখে যেমন শরীরে মার্জিন এবং প্যাডিং? vhআক্ষরিক অর্থে দর্শনটির দৈর্ঘ্য, তাই অন্য কোনও উপাদান যদি আপনার পৃষ্ঠায় hight যোগ করে তবে পুরো পৃষ্ঠাটি> 100vh হবে। যে জানার জন্য?

— সর্বোচ্চ

ধন্যবাদ, এখনই সমাধান হয়েছে। কারও যদি একই সমস্যা হয় ( .svgফাইলটি ভালভাবে রেন্ডার করে তবে এটির নামকরণের .htmlকারণে ভুলত্রুটি হয়): ব্রাউজারটি ফাইলের ট্যাগ না থাকলেও স্বয়ংক্রিয়ভাবে ডিফল্টর <body>সাথে ট্যাগ যুক্ত করে। সুতরাং সমাধান যোগ করা হচ্ছেmargin:8<body><style>body{margin:0}</style>

— পাভেল

15

আপনি যদি নিজের চিত্রের চারপাশে একটি ধারক উপাদান রাখতে ইচ্ছুক হন তবে একটি খাঁটি সিএসএস সমাধান সহজ is আপনি দেখুন, 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>?

— স্টিভোউএন

@ 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কেবলমাত্র আইআই ১ 16.০ থেকে সম্পূর্ণ সমর্থনযোগ্য

— am0wa
সূত্র

1

সেই সমাধানের মতো তবে আপনার উল্লেখ করা উচিত যে আইজ 11-এর সাথে অবজেক্ট-ফিট উপযুক্ত নয় যা এখনও ব্যাপকভাবে দুর্ভাগ্যজনকভাবে ব্যবহৃত হয়।

— ব্ল্যাকবাম

@ ডিভিজ সেহগাল এর পরে আপনার দরকার নেই object-fitবা আপনি স্পষ্টতই ব্যবহার করতে পারেন object-fit: fill;যা পূর্বনির্ধারিত ।

— am0wa

আমরা কি উল্লম্বভাবে কেন্দ্র করতে চাই?

— এফএমস্ট্র্যাট

আমরা কি উল্লম্বভাবে কেন্দ্র করতে চাই? শুধু যোগ করুন: মার্জিন: অটো;

— বিড়াল 18

সমাধানটি উত্তর থেকে এইচটিএমএল এবং বডি স্টাইলের সাথে একসাথে কাজ করে: এইচটিএমএল, বডি {প্রস্থ: 100%; উচ্চতা: 100%; মার্জিন: 0; প্যাডিং: 0; }

— ইভান কোভাতুন

3

আমার সাধারণ অলস সিএসএস বিধি:

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

এটি আপনার চিত্রটিতে জুম বাড়তে পারে যদি এটির শুরু কম হয় (এটি আপনার চিত্রের মান এবং আকারের আকারের সাথে করতে হয় your আপনার চিত্রকে কেন্দ্র করতে, আপনিও চেষ্টা করতে পারেন (সিএসএসে))

display:block;    
margin: auto 0;

আপনার ইমেজ কেন্দ্রে

আপনার এইচটিএমএল:

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

— usrrname
সূত্র

3

আমি জানি এখানে ইতিমধ্যে কয়েকটি উত্তর রয়েছে, তবে আমি এখানে ব্যবহার করেছি:

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

— TomC
সূত্র

আমি জানি না কেন, তবে এটি একটি কবজির মতো কাজ করে। আমি একটি ব্যাখ্যা পছন্দ করি!

— SeedyROM

আমি না, তবে এটি অনেক সন্ধানের পরেও পেলাম।

— টমসি

2

আমার অনুরূপ প্রয়োজনীয়তা ছিল এবং এটি করতে হয়েছিল বেসিক সিএসএস এবং জাভাস্ক্রিপ্ট। কোনও জিকিউরি উপলব্ধ নেই।

এই আমি কাজ পেয়েছিলাম।

<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

সিএসএস 3 এর সাথে আমরা "ভিএইচ" এবং "ভিডাব্লু" ইউনিট পাই যা যথাক্রমে শতাংশ ভিউপোর্ট-উচ্চতা এবং শতাংশ ভিউপোর্ট-প্রস্থ। কেবল img {সর্বোচ্চ-প্রস্থ: 95vw; সর্বাধিক উচ্চতা: 95vh; be যথেষ্ট হতে পারে।

— ববপল

যদি আপনি এটি উত্তর হিসাবে যুক্ত করতে পারেন তবে পরবর্তী সময়ে যে কোনও ব্যক্তির পক্ষে এটি কার্যকর হতে পারে।

— রোহিত ভিপিন ম্যাথিউজ

আপনি দেখতে পারা যায় এমন জায়গায় একাধিক চিত্রও স্তুপ করতে পারেন। দুটো চিত্রের জন্য, দুই করা 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
সূত্র

হাই, আপনার উত্তরের জন্য ধন্যবাদ, তবে যখন চিত্রটির উচ্চতা উইন্ডোর চেয়ে বেশি হয় তখন এটি যৌক্তিকভাবে কাজ করে না এবং করতে পারে না।

— sebnukem

1

আচ্ছা ... আপনি কী করতে চান? আপনি এটি প্রসারিত করতে চান? অথবা ইরিওজিনাল অনুপাত অক্ষত রেখে দেওয়া উচিত (আমি ধরে নিই এটি আপনি কী চান)?

— রবিনজে 30'11

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

এই চিত্রটি ফসল দেয় তাই এটি গ্রহণযোগ্য নয়। উত্তর করার জন্য ধন্যবাদ.

— sebnukem

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>

— বৈভব খুন্ত
সূত্র