จะปรับขนาดรูปภาพให้พอดีกับหน้าต่างเบราว์เซอร์ได้อย่างไร?

116

สิ่งนี้ดูเหมือนจะไม่สำคัญ แต่หลังจากการวิจัยและการเข้ารหัสทั้งหมดฉันไม่สามารถใช้งานได้ เงื่อนไขคือ:

  1. ไม่ทราบขนาดหน้าต่างเบราว์เซอร์ ดังนั้นโปรดอย่าเสนอโซลูชันที่เกี่ยวข้องกับขนาดพิกเซลที่แน่นอน
  2. ไม่ทราบขนาดดั้งเดิมของรูปภาพและอาจพอดีหรือไม่พอดีกับหน้าต่างเบราว์เซอร์
  3. ภาพอยู่กึ่งกลางแนวตั้งและแนวนอน
  4. สัดส่วนของภาพต้องได้รับการอนุรักษ์
  5. ภาพจะต้องแสดงอย่างครบถ้วนในหน้าต่าง (ไม่มีการครอบตัด)
  6. ฉันไม่ต้องการให้แถบเลื่อนปรากฏขึ้น (และไม่ควรใช้หากภาพพอดี)
  7. รูปภาพจะปรับขนาดโดยอัตโนมัติเมื่อขนาดของหน้าต่างเปลี่ยนไปเพื่อใช้พื้นที่ว่างทั้งหมดโดยไม่ต้องใหญ่กว่าขนาดเดิม

โดยทั่วไปสิ่งที่ฉันต้องการคือ:

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

ปัญหาเกี่ยวกับโค้ดด้านบนคือมันใช้งานไม่ได้: รูปภาพใช้พื้นที่แนวตั้งทั้งหมดที่ต้องการโดยการเพิ่มแถบเลื่อนแนวตั้ง

ในการกำจัดของฉันคือ PHP, Javascript, JQuery แต่ฉันจะฆ่าด้วยโซลูชัน CSS เท่านั้น ฉันไม่สนใจว่ามันจะใช้ไม่ได้ใน IE

html  css 
— sebnukem
แหล่งที่มา
perraultarchitecte.com/th/projects/…นี่คือเอฟเฟกต์ที่คุณต้องการใช่ไหม? ฉันด้วย!
1
ใช่แล้ว. วิธีแก้ปัญหาที่ฉันได้โพสต์ไว้ข้างต้นใช้งานได้ สามารถดูผลลัพธ์ได้ที่eseb.net/potos.php?f=best_of/fort_collins_winter.jpg
— sebnukem
ขอบคุณที่ช่วยฉันได้จริงๆ มีคำแนะนำอะไรบ้างที่ฉันสามารถทำได้เพื่อวางสองภาพเคียงข้างกันโดยยังคงฟังก์ชันการปรับขนาดไว้ ขอบคุณ.
9
ฉันชอบ "ข้อกำหนดที่ไม่ใช่" ของคุณ: "ฉันไม่สนใจว่ามันจะใช้ไม่ได้ใน IE" :)
— Bastian

คำตอบ:

122

อัพเดท 2018-04-11

นี่คือโซลูชันที่ไม่ใช้ Javascript และCSS เท่านั้น รูปภาพจะถูกจัดกึ่งกลางและปรับขนาดให้พอดีกับหน้าต่างแบบไดนามิก

<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
ไม่จำเป็นต้อง JS, มี CSS เพียงการแก้ปัญหา
— Neolisk
นอกจากนี้ยังไม่มี JS ให้ใช้ flexbox
— Jason Sturges ใน
51

นี่คือโซลูชัน CSS แบบง่ายๆเท่านั้น ( JSFiddle ) ใช้งานได้ทุกที่รวมถึงมือถือและ 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>
— นีโอลิสก์
แหล่งที่มา
2
ดี. แต่ไม่ได้อยู่กึ่งกลางแนวตั้ง
— sebnukem
1
@sebnukem: มันควรจะเป็นเหรอ? ฉันพลาดสิ่งนี้ในข้อกำหนด นั่นเป็นเหตุผลที่ผู้คนใช้ภาพหน้าจอ / ภาพจำลอง :) ป.ล. ฉันไม่คิดว่าคำตอบใด ๆ ที่ให้ไว้ทำให้มันอยู่ตรงกลางในแนวตั้งแม้จะใช้ JS ช่วยก็ตาม
— Neolisk
3
ฉันได้ลองใช้วิธีแก้ปัญหามากมายแล้วแม้แต่วิธีแก้ปัญหาจาก css-tricks ของคุณทำงานได้อย่างสมบูรณ์แบบเหมือนมีเสน่ห์!
— Stephan
2
ทางออกที่ดีที่สุด!
— iVela
24

CSS3 แนะนำหน่วยใหม่ที่วัดโดยสัมพันธ์กับวิวพอร์ตซึ่งเป็นหน้าต่างในกรณีนี้ นี่คือvhและvwซึ่งวัดความสูงและความกว้างของวิวพอร์ตตามลำดับ นี่คือวิธีแก้ปัญหาเฉพาะ CSS ง่ายๆ:

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

ข้อแม้ประการหนึ่งก็คือมันจะใช้งานได้ก็ต่อเมื่อไม่มีองค์ประกอบอื่น ๆ ที่เอื้อต่อความสูงบนหน้า

— สูงสุด
แหล่งที่มา
ขอบคุณเยี่ยมมาก มีเหตุผลใด100vhบ้างที่ไม่ปล่อยให้ภาพพอดี แต่ใช้97vhงานได้ดี?
— Pavel
บางทีคุณอาจมีภาพอื่นที่เอื้อต่อความสูงเช่นระยะขอบและช่องว่างภายในร่างกาย vhหมายถึงความสูงของมุมมองอย่างแท้จริงดังนั้นหากองค์ประกอบอื่นใดเพิ่มความสูงให้กับเพจของคุณทั้งหน้าจะเท่ากับ> 100vh มันสมเหตุสมผลไหม
— สูงสุด
ขอบคุณแก้ไขแล้ว หากใครมีปัญหาเดียวกัน ( .svgไฟล์แสดงผลได้ดี แต่เปลี่ยนชื่อเพื่อ.htmlทำให้เกิดความไม่ถูกต้อง): เบราว์เซอร์จะเพิ่ม<body>แท็กโดยอัตโนมัติmargin:8แม้ว่าไฟล์จะไม่มี<body>แท็กก็ตาม ดังนั้นวิธีแก้ปัญหาจึงเพิ่มขึ้น<style>body{margin:0}</style>
— Pavel
15

หากคุณต้องการใส่องค์ประกอบคอนเทนเนอร์รอบ ๆ รูปภาพของคุณโซลูชัน CSS ที่แท้จริงนั้นทำได้ง่าย คุณจะเห็นว่าความสูง 99% ไม่มีความหมายเมื่อองค์ประกอบหลักจะขยายในแนวตั้งเพื่อบรรจุลูกของมัน ผู้ปกครองต้องมีความสูงคงที่พูดว่า ... ความสูงของวิวพอร์ต

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

เล่นกับซอ .

— มาร์คอีฮาเสะ
แหล่งที่มา
คุณสามารถทำได้โดยใช้ a <div>แทน<img>?
— StevoHN
@sebnukem ฉันไม่ได้สังเกตข้อกำหนดนั้นมาก่อน ฉันได้อัปเดตคำตอบแล้ว
— Mark E.Haase
นี่ไม่ได้เพิ่มความสูงของภาพกว้าง
— Sridhar Sarnobat
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
เช่นเดียวกับโซลูชันนั้น แต่คุณควรพูดถึงว่า object-fit ไม่เข้ากันได้กับ IE11 ซึ่งยังคงใช้กันอย่างแพร่หลาย
— Blackbam
@DivijSehgal แล้วคุณไม่จำเป็นต้องมีobject-fitหรือคุณอย่างชัดเจนสามารถใช้object-fit: fill;ซึ่งเป็นค่าเริ่มต้น
— am0wa
จะเป็นอย่างไรหากเราต้องการจัดกึ่งกลางแนวตั้ง
— Fmstrat
จะเป็นอย่างไรหากเราต้องการจัดกึ่งกลางแนวตั้ง เพียงแค่เพิ่ม: margin: auto;
— แมว
โซลูชันทำงานร่วมกับ html และ body style จากคำตอบอื่น: html, body {width: 100%; ความสูง: 100%; ระยะขอบ: 0; ช่องว่างภายใน: 0; }
— Ivan Kovtun
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
แหล่งที่มา
ฉันไม่รู้ว่าทำไม แต่มันใช้งานได้เหมือนมีเสน่ห์ ฉันชอบคำอธิบาย!
— SeedyROM
ฉันไม่เหมือนกัน แต่มันคือสิ่งที่ฉันพบหลังจากการค้นหามากมาย
— TomC
2

ฉันมีข้อกำหนดที่คล้ายกันและต้องทำมันพื้นฐาน CSS และ JavaScript ไม่มี 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; max-height: 95vh;} อาจเพียงพอ
— bobpaul
หากคุณสามารถเพิ่มเป็นคำตอบอาจเป็นประโยชน์สำหรับคนใดคนหนึ่งที่จะมาถึงในภายหลัง
— Rohit Vipin Mathews
คุณยังสามารถซ้อนภาพหลาย ๆ ภาพในพื้นที่ที่สามารถดูได้ สำหรับสองภาพใส่สองimgแท็กเข้าไปในbodyของหน้าและชุดที่จะmax-height 49vhการแสดงภาพมากกว่าสองภาพในพื้นที่ที่สามารถดูได้ถือเป็นการออกกำลังกายสำหรับผู้อ่าน
— Andrew Beals
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>
ขยายข้อมูลโค้ด

— ฮัสซันซิดดิกี
แหล่งที่มา
ขอบคุณ! เพียงแค่เพิ่ม style = "height: 80vh;" ในแท็กรูปภาพเป็นเคล็ดลับสำหรับฉัน
— Tobias J.
1 
width: 100%;
overflow: hidden;

ฉันเชื่อว่าควรทำเคล็ดลับ

— โรบินเจ
แหล่งที่มา
สวัสดีขอบคุณสำหรับคำตอบของคุณ แต่มันใช้ไม่ได้และไม่สามารถทำงานได้อย่างมีเหตุผลเมื่อความสูงของภาพมากกว่าหน้าต่าง
— sebnukem
1
อืม ... ตั้งใจจะทำอะไร? คุณต้องการยืดหรือไม่? หรือควรปล่อยให้สัดส่วนดั้งเดิมเหมือนเดิม (ฉันคิดว่านี่คือสิ่งที่คุณต้องการ)?
— RobinJ
1

จากคำตอบของ @ Rohit สิ่งนี้จะแก้ไขปัญหาที่ Chrome ตั้งค่าสถานะได้ปรับขนาดภาพได้อย่างน่าเชื่อถือและยังใช้ได้กับภาพหลายภาพที่ซ้อนกันในแนวตั้งเช่น<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>
ขยายข้อมูลโค้ด

— Andrew Beals
แหล่งที่มา
โดยการใช้ไซต์ของเรา หมายความว่าคุณได้อ่านและทำความเข้าใจนโยบายคุกกี้และนโยบายความเป็นส่วนตัวของเราแล้ว
Licensed under cc by-sa 3.0 with attribution required.