Làm thế nào để thay đổi kích thước hình ảnh để vừa với cửa sổ trình duyệt?

114

Điều này có vẻ tầm thường nhưng sau tất cả các nghiên cứu và mã hóa, tôi không thể làm cho nó hoạt động. Điều kiện là:

  1. Kích thước cửa sổ trình duyệt không xác định. Vì vậy, vui lòng không đề xuất một giải pháp liên quan đến kích thước pixel tuyệt đối.
  2. Kích thước ban đầu của hình ảnh là không xác định và có thể đã hoặc chưa vừa với cửa sổ trình duyệt.
  3. Hình ảnh được căn giữa theo chiều dọc và chiều ngang.
  4. Tỷ lệ hình ảnh phải được bảo toàn.
  5. Hình ảnh phải được hiển thị toàn bộ trong cửa sổ (không cắt xén.)
  6. Tôi không muốn thanh cuộn xuất hiện (và chúng sẽ không xuất hiện nếu hình ảnh phù hợp.)
  7. Hình ảnh tự động thay đổi kích thước khi kích thước cửa sổ thay đổi, để chiếm tất cả không gian có sẵn mà không lớn hơn kích thước ban đầu của nó.

Về cơ bản những gì tôi muốn là:

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

Vấn đề với đoạn mã trên là nó không hoạt động: pic chiếm tất cả không gian dọc mà nó cần bằng cách thêm một thanh cuộn dọc.

Theo ý của tôi là PHP, Javascript, JQuery nhưng tôi muốn giết cho một giải pháp chỉ CSS. Tôi không quan tâm nếu nó không hoạt động trong IE.

html  css 
— sebnukem
nguồn
perraultarchitecte.com/en/projects/… Đây là hiệu ứng bạn muốn, phải không? tôi cũng vậy!
1
Vâng, đúng vậy. Giải pháp đó tôi đã đăng công trình ở trên. Bạn có thể xem kết quả tại eseb.net/potos.php?f=best_of/fort_collins_winter.jpg
— sebnukem
Cảm ơn, điều đó thực sự giúp tôi. Bất kỳ đề xuất nào tôi có thể làm để đặt hai hình ảnh cạnh nhau, giữ chức năng thay đổi kích thước? Cảm ơn bạn.
9
Tôi thích "không yêu cầu" của bạn: "Tôi không quan tâm nếu nó không hoạt động trong IE." :)
— Bastian

Câu trả lời:

122

Cập nhật 2018-04-11

Đây là một giải pháp không cần Javascript, chỉ CSS . Hình ảnh sẽ tự động được căn giữa và thay đổi kích thước để vừa với cửa sổ.

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

Giải pháp [khác, cũ], sử dụng JQuery, đặt chiều cao của vùng chứa hình ảnh ( bodytrong ví dụ bên dưới) để thuộc max-heighttính trên hình ảnh hoạt động như mong đợi. Hình ảnh cũng sẽ tự động thay đổi kích thước khi cửa sổ khách hàng được thay đổi kích thước.

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

Lưu ý: Người dùng gutierrezalex đã đóng gói một giải pháp tương tự như một plugin JQuery trên trang này.

— sebnukem
nguồn
6
Không cần JS, chỉ có một giải pháp CSS .
— Neolisk
— Jason Sturges
51

Đây là một giải pháp chỉ CSS đơn giản ( JSFiddle ), hoạt động ở mọi nơi, bao gồm cả thiết bị di động và 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
nguồn
2
Đẹp. Nhưng nó không được căn giữa theo chiều dọc.
— sebnukem
1
@sebnukem: Có phải vậy không? Bằng cách nào đó tôi đã bỏ lỡ điều này trong các yêu cầu. Đó là lý do tại sao mọi người sử dụng ảnh chụp màn hình / mô hình. :) PS Tôi không nghĩ rằng bất kỳ câu trả lời nào được cung cấp làm cho nó được căn giữa theo chiều dọc, ngay cả với sự trợ giúp của JS.
— Neolisk
3
Tôi đã thử nhiều giải pháp trên mạng, thậm chí cả các giải pháp từ css-trick. Của bạn chỉ hoạt động hoàn hảo như một sự quyến rũ!
— Stephan
2
Giải pháp tốt nhất bao giờ hết!
— iVela 23/02/18
24

CSS3 giới thiệu các đơn vị mới được đo liên quan đến khung nhìn, là cửa sổ trong trường hợp này. Đây là vhvà vw, lần lượt đo chiều cao và chiều rộng của khung nhìn. Đây là một giải pháp CSS chỉ đơn giản:

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

Một lưu ý cho điều này là nó chỉ hoạt động nếu không có yếu tố nào khác đóng góp chiều cao trên trang.

— Max
nguồn
Cảm ơn, điều đó thật tuyệt. Có lý do gì tại sao 100vhkhông để hình ảnh phù hợp nhưng 97vhhoạt động tốt?
— Pavel
Có lẽ bạn có hình ảnh khác đóng góp chiều cao, chẳng hạn như lề và phần đệm trên cơ thể? vhtheo nghĩa đen có nghĩa là độ cao của lượt xem, vì vậy nếu bất kỳ yếu tố nào khác thêm lượt xem vào trang của bạn, toàn bộ trang sẽ> 100vh. Điều đó có ý nghĩa?
— Tối đa
Cảm ơn bạn, đã giải quyết ngay bây giờ. Nếu ai đó gặp vấn đề tương tự ( .svgtệp hiển thị tốt, nhưng việc đổi tên nó .htmlgây ra sự không chính xác): trình duyệt tự động thêm <body>thẻ với mặc định margin:8ngay cả khi tệp không có <body>thẻ. Vì vậy, giải pháp đang được thêm vào<style>body{margin:0}</style>
— Pavel
15

Nếu bạn sẵn sàng đặt một phần tử vùng chứa xung quanh hình ảnh của mình, thì một giải pháp CSS thuần túy rất đơn giản. Bạn thấy đấy, 99% chiều cao không có ý nghĩa gì khi phần tử cha sẽ mở rộng theo chiều dọc để chứa phần tử con của nó. Cha mẹ cần có một chiều cao cố định, chẳng hạn ... chiều cao của khung nhìn.

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

Chơi với fiddle .

— Mark E. Haase
nguồn
Bạn có thể làm điều này với một <div>thay vì một <img>?
— StevoHN
@sebnukem Tôi đã không nhận thấy yêu cầu đó trước đây. Tôi đã cập nhật câu trả lời của mình.
— Mark E. Haase
Điều này không tối đa hóa chiều cao hình ảnh rộng của tôi.
— Sridhar Sarnobat
4

Thay đổi kích thước hình ảnh để vừa với màn hình theo cạnh dài nhất duy trì Tỷ lệ khung hình của nó

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

  • width: 100vw - chiều rộng hình ảnh sẽ là 100% cổng xem

  • height: auto - chiều cao hình ảnh sẽ được chia tỷ lệ theo tỷ lệ

  • max-height: 100vw - nếu chiều cao hình ảnh lớn hơn cổng xem, nó sẽ giảm để vừa với màn hình, do đó chiều rộng hình ảnh sẽ bị giảm vì thuộc tính sau

  • object-fit: contain - nội dung được thay thế được chia tỷ lệ để duy trì tỷ lệ co trong khi vừa vặn trong hộp nội dung của phần tử

    Lưu ý: object-fitchỉ được hỗ trợ đầy đủ kể từ IE 16.0

— am0wa
nguồn
1
Giống như giải pháp đó, tuy nhiên, bạn nên đề cập rằng object-fit không tương thích với IE11, rất tiếc là vẫn được sử dụng rộng rãi.
— Blackbam
@DivijSehgal thì bạn không cần object-fithoặc bạn có thể sử dụng một cách rõ ràng object-fit: fill;là mặc định .
— am0wa
Nếu chúng ta muốn căn giữa theo chiều dọc thì sao?
— Fmstrat
Nếu chúng ta muốn căn giữa theo chiều dọc thì sao? Chỉ cần thêm: margin: auto;
— cat
Giải pháp hoạt động cùng với html và body style từ một câu trả lời khác: html, body {width: 100%; chiều cao: 100%; lề: 0; đệm: 0; }
— Ivan Kovtun
3

Quy tắc CSS lười biếng chung của tôi:

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

Điều này có thể phóng to hình ảnh của bạn nếu ban đầu nó có độ phân giải thấp (điều đó liên quan đến chất lượng hình ảnh và kích thước hình ảnh của bạn theo kích thước. Để căn giữa hình ảnh, bạn cũng có thể thử (trong CSS)

display:block;    
margin: auto 0;

để căn giữa hình ảnh của bạn

trong HTML của bạn:

<div class="background"></div>
— usrrname
nguồn
3

Tôi biết đã có một vài câu trả lời ở đây, nhưng đây là những gì tôi đã sử dụng:

max-width: 100%;
max-height: 100vh;
width: auto;
margin: auto;
— TomC
nguồn
Tôi không biết tại sao, nhưng điều này hoạt động như một sự quyến rũ. Tôi muốn một lời giải thích!
— SeedyROM
Tôi cũng vậy, nhưng đó là thứ tôi tìm thấy sau rất nhiều tìm kiếm.
— TomC
2

Tôi đã có một yêu cầu tương tự và phải thực hiện nó bằng CSS và JavaScript cơ bản. Không có sẵn JQuery.

Đây là những gì tôi đã làm việc. 

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

Lưu ý: Tôi chưa sử dụng 100% cho chiều rộng hình ảnh vì luôn có một chút khoảng đệm cần được xem xét.

— Rohit Vipin Mathews
nguồn
2
Với CSS 3, chúng tôi nhận được các đơn vị "vh" và "vw" tương ứng là phần trăm chiều cao khung nhìn và phần trăm chiều rộng khung nhìn. đơn giản là img {max-width: 95vw; max-height: 95vh;} có thể là đủ.
— bobpaul,
Nếu bạn có thể bổ sung nó như một câu trả lời có thể hữu ích cho bất kỳ ai đến đây sau này.
— Rohit Vipin Mathews
Bạn cũng có thể xếp chồng nhiều hình ảnh trong vùng có thể xem. Đối với hai hình ảnh, hãy đặt hai imgthẻ vào bodytrang và đặt max-heightthành 49vh. Việc hiển thị nhiều hơn hai hình ảnh trong khu vực có thể xem được chỉ là một bài tập cho người đọc.
— Andrew Beals
2

Làm nó đơn giản. Cảm ơn

.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>
Mở rộng đoạn mã

— Hassan Siddiqui
nguồn
cảm ơn! chỉ cần thêm style = "height: 80vh;" trong thẻ hình ảnh đã làm thủ thuật cho tôi.
— Tobias J.
1 
width: 100%;
overflow: hidden;

Tôi tin rằng điều đó nên thực hiện thủ thuật.

— RobinJ
nguồn
Xin chào, cảm ơn câu trả lời của bạn, nhưng nó không và không thể hoạt động một cách hợp lý khi chiều cao hình ảnh lớn hơn cửa sổ.
— sebnukem
1
Chà ... Bạn định làm gì vậy? Bạn có muốn kéo dài nó không? Hay nên giữ nguyên tỷ lệ ban đầu (tôi cho rằng đây là những gì bạn muốn)?
— RobinJ
1

Dựa trên câu trả lời của @ Rohit, điều này khắc phục các sự cố do Chrome gắn cờ, thay đổi kích thước hình ảnh một cách đáng tin cậy và cũng hoạt động đối với nhiều hình ảnh được xếp chồng lên nhau theo chiều dọc, ví dụ: <img src="foo.jpg"><br><img src="bar.jpg"><br><img src="baz.jpg"> Có lẽ có một cách thanh lịch hơn để làm điều này. 

<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>
Mở rộng đoạn mã

— Andrew Beals
nguồn
0

Sử dụng mã này trong thẻ phong cách của bạn

<style>
html {
  background: url(imagename) no-repeat center center fixed;
  background-size: cover;
  height: 100%;
  overflow: hidden;
}
</style>
— vaibhav khunt
nguồn
Khi sử dụng trang web của chúng tôi, bạn xác nhận rằng bạn đã đọc và hiểu Chính sách cookie và Chính sách bảo mật của chúng tôi.
Licensed under cc by-sa 3.0 with attribution required.