Wie maximale Breite und Höhe auf Bildschirmgröße in CSS begrenzen?

Ich versuche eine PHP-Galerie zu erstellen und deshalb brauche ich eine gute Maske, wo die Bilder später gezeigt werden können. Ich möchte die Maske nicht größer als die Bildschirmgröße sein. Ich meine, es muss kein Scrollen stattfinden und die ganze <body> muss nur die Breite und Höhe des Browserfensters haben, so dass jedes untergeordnete Objekt in <body> auf die Rahmengröße des Browsers beschränkt ist und bei Überlaufen verkleinert wird . Ich habe mit max-width und max-height auf dem <body> versucht, aber es funktioniert nicht.Wie maximale Breite und Höhe auf Bildschirmgröße in CSS begrenzen?

Hier ist mein Code:

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!

Quelle

2016-03-27 hans2020dieter

Versuchen:

html, 
body { 
    height: 100%; 
} 

body { 
    overflow: hidden; 
}

Wissen Sie, wie viele untergeordnete Elemente in Ihrer Galerie sein wird? Wenn die Anzahl der Elemente statisch ist, können Sie einfach ihre Dimensionen in CSS mit den Einheiten vw und vh festlegen. Kein JavaScript beteiligt, und die Elemente würden niemals Ihren Körper überlaufen können.

Quelle

2016-03-27 23:23:18

Danke auch, aber dein Weg ist auch nicht das, wonach ich suche, weil es richtig ist, dass ich mit deinem Weg das Scrollen verhindern kann, aber es gibt immer noch einen Überlauf auf der Seite ... Ich möchte meine Website davon abhalten Überläufe, so dass, wenn ein Objekt versucht, überzulaufen, es auf eine passende Größe verkleinert wird, die nicht überläuft ... weißt du, was ich meine? – hans2020dieter

Bearbeitete meine Antwort, um vorzuschlagen, Kinderelemente mit vw und vh zu dimensionieren. Dies funktioniert, wenn Galerieelemente statisch sind ... Wenn Sie Elemente dynamisch hinzufügen oder subtrahieren, ist JavaScript der einzige Weg. –

Wenn Sie die Höhe wollen genau 100% der Ansicht Bildschirm, und das gleiche mit der Breite sein, verwenden

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>

Quelle

2016-03-27 23:24:27 k97513

vor allem: vielen Dank für Ihre schnelle Antwort ... aber tut mir leid, diese Antwort hilft mir nicht sehr, weil Ihr < div > Container Bildschirmgröße sein kann, aber das Bild darin ist groß, um einen Überlauf zu erzwingen ... so dass Sie wieder das Scrollen haben, das ich verhindern wollte . Haben Sie eine Idee, wie Sie den < div > Container davon abhalten können, die Bildschirmfenstergröße zu überschreiten? Ich meine, eine Grenze für alle Objekte im < div > Container zu setzen, die sie nicht überschreiten dürfen und somit auf eine passende Größe verkleinert werden? – hans2020dieter

Was ist der Zweck des div und das Bild? – k97513

Wenn Sie eine Galerie erstellen, legen Sie das Bild nicht in das div. Machen Sie das div zu einem "Cover" und machen Sie das Bild "position: absolute". Dann positioniere es. Wenn du eine Galerie machst, dann machst du die maximale Höhe des Bildes: 90% oder so ähnlich. – k97513

Ich bin nicht sicher, ob dies mit CSS möglich ist, könnte es sein. Ich habe ähnliches Problem mit Javascript gelöst:

window.top.innerHeight;

wird die verfügbare Höhe, ausgeschlossen Menubars usw. des borwser. Sehen Sie, wie ich für die Höhe tat, war mein Problem, dass die Fußzeile sollte auch am Ende sein, wenn der Inhalt Leer-> war

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

Aussehen für diese Funktion in dem obigen Beispiel ->

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

Quelle

2016-03-27 23:38:23 coban

okay, danke ... ich versuche mit deiner Idee auszukommen ^^ weil ich eigentlich ' m sehr schlecht bei Javascript ... Ich meine, ich suchte nach einem Weg, ohne Javascript ... aber wenn es keine Möglichkeit gibt um Javascript, kann es nicht geholfen werden XD – hans2020dieter

Versuchen Sie, Ihre verfügbare Höhe und mit, alle anderen Elemente auszuschließen und passen Sie die Größe Ihres Bildes an den Rest der verfügbaren Höhe und Breite Btw, ich bin auch kein Webmaster, in stackoverflow können Sie eine Menge Javascript Beispiele finden. – coban

okay, danke! :) – hans2020dieter

Wie maximale Breite und Höhe auf Bildschirmgröße in CSS begrenzen?

Antwort

Verwandte Themen