Jak ograniczyć maksymalną szerokość i wysokość do rozmiaru ekranu w CSS?

Próbuję zrobić galerię php i dlatego potrzebuję dobrej maski, w której później można pokazać zdjęcia. Chcę, aby Maska nie była większa niż rozmiar ekranu. Chodzi mi o to, że nie ma potrzeby przewijania, a cały <body> musi mieć tylko szerokość i wysokość okien przeglądarki, aby każdy obiekt podrzędny w <body> był ograniczony do rozmiaru ramki przeglądarki i zostanie pomniejszony, jeśli przepełni się . Próbowałem z max-width i max-height na <body>, ale to nie działa.Jak ograniczyć maksymalną szerokość i wysokość do rozmiaru ekranu w CSS?

Oto mój kod:

index.html:

<!DOCTYPE html> 
<html> 
    <head> 
     <link rel="stylesheet" type="text/css" href="style.css"> 
    </head> 
    <body> 
     <div id="mother"> 
      <div id="header"> 
       <div id="back-link"> 
        <a href="../">Home</a> 
       </div> 
       <div id="prev"> 
        <a href="">next picture</a> 
       </div> 
       <div id="next"> 
        <a href="">previous picture</a> 
       </div> 
       <div id="headline"> 
        <p class="h2">Our Galery</p> 
       </div> 
      </div> 

      <!-- Content --> 
      <div id="container-bild"> 
       <img src="./bilder/P1130079.JPG" id="img-bild" /> 
      </div> 
     </div> 
    </body> 
</html>

style.css:

body { 
    max-width: 100%; 
    max-height: 100%; 
} 
/* mother-container */ 
div#mother { 
    max-width: 100%; 
    max-height: 100%; 
    margin: auto; 
} 
/* main-container */ 
#container-bild { 
    max-width: 100%; 
    max-height: 100%; 
} 
/* picture in main-container */ 
#img-bild { 
    max-width: 100%; 
    max-height: 100%; 
    border: 1px solid #280198; 
}

Thats what it still looks like - I dont want the Page to be bigger than window - click here to see the wrong version!

Źródło

2016-03-27 hans2020dieter

Spróbuj:

html, 
body { 
    height: 100%; 
} 

body { 
    overflow: hidden; 
}

Czy wiesz ile dziecko elementy będą w swojej galerii? Jeśli liczba elementów jest statyczna, możesz po prostu ustawić ich wymiary w CSS za pomocą jednostek vw i vh. Nie wymaga JavaScript, a elementy nigdy nie będą w stanie przepełnić twojego ciała.

Źródło

2016-03-27 23:23:18

Dziękuję również, ale twoja droga też nie jest tym, czego szukam, ponieważ to prawda, że na swój sposób mogę zapobiec przewijaniu, ale wciąż jest przepełnienie strony ... Chcę, aby moja strona internetowa przepełnia się, więc jeśli obiekt spróbuje przepełnić, zostanie zmniejszony do rozmiaru dopasowania, który nie przepełnia ... czy wiesz co mam na myśli? – hans2020dieter

Zmieniono moją odpowiedź na sugestię doboru elementów potomnych za pomocą vw i vh. To zadziała, jeśli elementy galerii są statyczne ... jeśli dynamicznie dodajesz lub odejmujesz elementy, to JavaScript będzie jedynym sposobem. –

Jeśli chcesz być na wysokość dokładnie 100% ekranu widzenia, a tym samym z szerokości, należy

height: 100vh;//100% view height 
width: 100vw;// 100% view width

div { 
 
    background-color: blue; 
 
    height: 100vh; 
 
    width: 100vw; 
 
    position: absolute; 
 
    top: 0; 
 
    left: 0; 
 
}

<div>hi</div>

Źródło

2016-03-27 23:24:27 k97513

przede wszystkim: dzięki za szybką odpowiedź ... ale, przepraszam, ta odpowiedź nie pomoże mi bardzo, ponieważ twój kontener < div > może być wielkością ekranu, ale obraz w nim jest duży, aby wymusić przepełnienie ... tak, że znowu masz przewijanie, które chciałem uniemożliwić . Masz pomysł, jak zmusić kontener < div > do przekroczenia rozmiaru okna? Mam na myśli ograniczenie wszystkich obiektów w kontenerze < div >, których nie mogą przekroczyć, a tym samym zostaną one skurczone do odpowiedniego rozmiaru? – hans2020dieter

Jaki jest cel div i obrazu? – k97513

Jeśli tworzysz galerię, nie umieszczaj obrazu wewnątrz elementu div. Utwórz div jako "cover" i ustaw obraz 'position: absolute'. Następnie umieść go. Ponadto, jeśli tworzysz galerię, wykonaj obrazek 'max-height: 90%' lub coś podobnego. – k97513

Nie jestem pewien, czy jest to możliwe z css, to może być. Mam rozwiązać podobny problem z javascript:

window.top.innerHeight;

dostaje dostępną wysokość wykluczone menubars itp z borwser. Zobacz jak to zrobiłem na wysokości, mój problem był taki, że stopka powinna być na dole, nawet jeśli zawartość była pustymi>

<!doctype html> 
<html> 
<head> 
<meta charset="utf-8"> 
<title>C-Driver Manager</title> 
<meta name="keywords" content="Aygit,Device,Driver,Surucu,Download,Indir,yedekle,Unknown,Bilinmeyen,Backup,Back-up,stuurprogramma,apparaat,windows,w7,w8,w10,multilanguage,tool,free,gratis,ucretsiz"> 
<meta name="description" content="Windows 7/8/10 Device indentify, Driver backup, Driver info"> 
<link rel="stylesheet" type="text/css" href="main.css"> 
<link rel="icon" href="images/favicon.ico"> 
</head> 

<body onResize="resizecontainer();"> 
    <div class="divtop"> 
     <div class="divtopcontainer"> 
      <div class="divlogo"> 

      </div> 
      <div class="divHmenu"> 
       <style> 
    .mnuHorizontal 
    { 
     list-style:none; 
    } 
    .mnuHorizontal li 
    { 
     float:left; 
    } 

    .mnuHorizontal .activemnu a,.mnuHorizontal li a:hover 
    { 
     background:#00B7EF; 
     border-radius:5px; 
     color:white; 
    } 


    .mnuHorizontal li a 
    { 
     display:inline-block; 
     text-decoration:none; 
     padding:5px 12px; 
     text-align:center; 
     font-weight:bold; 
     color:#020042; 
    } 

    </style> 

<ul class="mnuHorizontal"> 
    <li id="index.php"><a href="index.php">HOME</a></li> 
    <li id="features.php"><a href="features.php">FEATURES</a></li> 
    <li id="download.php" class="activemnu"><a href="download.php">DOWNLOAD</a></li> 
    <li id="contact.php"><a href="contact.php">CONTACT</a></li> 
</ul> 
      </div> 
     </div> 
    </div> 

    <div class="divblueline"></div> 

    <div class="divcontainer"> 
<div style="float:left"> 
    <h2>What is C-Driver Manager</h2> 
    C-Driver Manager is a simple tool that; 
    <ul> 
     <li>displays information about your devices</li> 
     <li>identify unrecognized devices by windows</li> 
     <li>Backups your devices driver</li> 
    </ul> 

<h2>Why C-Driver Manager?</h2> 
<ul> 
    <li>No installation needed</li> 
    <li>No adware</li> 
    <li>No spyware</li> 
    <li>Absolutely freeware</li> 
</ul> 
</div> 
<div> 
    <img alt="" src="images/devmgr5.jpg" height="430" width="700"> 
</div> 

</div> 

    <div class="divblueline"></div> 
    <div class="divbottom"> 
     <div id="chmx"> 
     </div> 
    </div> 
</body> 
    <script> 
     for (i=0;i<document.getElementsByClassName('mnuHorizontal').item(0).children.length; i++) 
     { 
      if (document.getElementsByClassName('mnuHorizontal').item(0).children[i].id == 
       "index.php") 

      { 
       document.getElementsByClassName('mnuHorizontal').item(0).children[i].className = 'activemnu'; 
      } 
      else 
      { 
       document.getElementsByClassName('mnuHorizontal').item(0).children[i].className = ''; 
      } 
     } 

     resizecontainer(); 

     function resizecontainer() 
     { 
      avh  = window.top.innerHeight; 
      dbh  = document.getElementsByClassName('divbottom').length * 
         document.getElementsByClassName('divbottom').item(0).clientHeight; 

      dbt  = document.getElementsByClassName('divtop').length * 
         document.getElementsByClassName('divtop').item(0).clientHeight; 

      dbbl = document.getElementsByClassName('divblueline').length * 
         document.getElementsByClassName('divblueline').item(0).clientHeight; 

      decrh = dbh + dbt + dbbl; 

      document.getElementsByClassName('divcontainer').item(0).style.minHeight = (avh - decrh) + 'px'; 
     } 
    </script> 
</html>

wygląd dla tej funkcji wewnątrz powyższym przykładzie ->

function resizecontainer() 
     { 
      avh  = window.top.innerHeight; 
      dbh  = document.getElementsByClassName('divbottom').length * 
         document.getElementsByClassName('divbottom').item(0).clientHeight; 

      dbt  = document.getElementsByClassName('divtop').length * 
         document.getElementsByClassName('divtop').item(0).clientHeight; 

      dbbl = document.getElementsByClassName('divblueline').length * 
         document.getElementsByClassName('divblueline').item(0).clientHeight; 

      decrh = dbh + dbt + dbbl; 

      document.getElementsByClassName('divcontainer').item(0).style.minHeight = (avh - decrh) + 'px'; 
     }

Źródło

2016-03-27 23:38:23 coban

ok, dziękuję ... Próbuję dogadać się z tobą pomysł ^^ ponieważ, faktycznie ja ' m bardzo źle w javascript ... Chodzi mi o to, że szukałem sposobu, bez javascript ... ale jeśli nie ma mowy o javascript, to nie da się pomóc XD – hans2020dieter

Postaraj się uzyskać dostępną wysokość iz wykluczeniem wszystkich innych elementów i dopasuj rozmiar twojego zdjęcia do reszty dostępnej wysokości i szerokości Btw, nie jestem też webmasterem, wewnątrz stackoverflow możesz znaleźć wiele przykładów javascript. – coban

ok, dziękuję! :) – hans2020dieter

Jak ograniczyć maksymalną szerokość i wysokość do rozmiaru ekranu w CSS?

Odpowiedz

Powiązane problemy