die Größe der Bilder mit % in css

Ich bin versuchen, um eine Flüssigkeit web-layout mit %, so viele Dinge wie ich kann. Ich habe eine Bodenwelle fuhr bei der Größenänderung von Bildern.

beide:

<img src="source" style="width: 20%; height: 20%;"/>

und

.wall_picture_block img{
width: 20%; 
height: 20%;
}

arbeiten nicht ordnungsgemäß mit der Höhe attribte. Sie die Größe die Breite des Bildes auf 20% der container, aber die Höhe bleibt relativ zur Bildgröße.(im Versuch, um Quadrate)

InformationsquelleAutor slexAtrukov | 2010-09-26
  1. 4

    Den Prozentzahlen in height und width Attribute eines Bildes arbeiten mit dem container enthalten ist. So erreichen die fluid-Effekt nur versuchen, setzen in einem container rund um die img und geben Sie Höhe und Breite eines Bildes: 100%. und jetzt sollten Sie ändern Sie die Höhe und Breite des Behälters in Prozent. Hier ist ein Beispiel

    <div style="width: 500px; height: 100px;">
   <img src="your-image-link-here" style="height: 100%; width: 100%;">
</div>

    Mit diesem wird Ihr Bild erreichen eine Höhe und Breite von 500 * 100.

    UPDATE

    <div id="wrapper" style="border: 1px solid red; width: 900px; height: 400px;">
  <div id="imgcontainer" style="width: 100%; height: 50%;">
     <img src="ur-img" style="height: 100%; width: 100%;">
  </div>
</div>

    Beispiel mit einem wrapper und container mit den Prozentzahlen.

    • was ist, wenn der container in % vom wrapper?
    • ja, es wird funktionieren. der container ist ein <div> und nimmt die Maße, welche die Möglichkeiten: %Alter oder Pixel.
    • Es funktioniert auf "helloworld" mit Bildern aus dem Ordner, aber nicht mit Bildern aus der db, es macht immer noch em allen verschiedenen Formen. Irgendeine Idee warum?
    • Kannst du mal den Teil des Codes, der bekommt die Bilder aus der db, kann ich dann möglicherweise eine Lösung vorschlagen dann. Wenn ich davon ausgehen, dass du nur immer auf den image-Pfad aus der Datenbank und legt es in das 'src' - Attribut das Bild, dann sollte es kein problem sein.
    • while($i < $rowNums){ ?> <a href="getImages.php?ImageID= <?php echo mysql_result($rslt,$i,"ImageID"); ?>" ><img src="getImages.php?ImageID= <?php echo mysql_result($rslt,$i,"ImageID"); ?>"/></a> <?php $i++;
    • alle seine unformatiert, aber im wesentlichen ja, nutze ich 2 Dateien, eine zu bekommen, alle ids und ein, um das image basiert auf der erhalten das ist geschickt, um die Datei als src-um dies zu erhalten: <ein href="getImages.php?ImageID= 4" ><img src="getImages.php?ImageID= 4"/></a>

    InformationsquelleAutor offhell
  2. 1

    Sollten Sie das Bild zuschneiden. Wenn Sie ein " % " für Breite oder Höhe, ich denke, der browser versucht zu bewahren, das Seitenverhältnis, unabhängig von dem Wert für die andere dimension.

    • Ich habe versucht, mit % für Breite/Höhe, aber mein browser NICHT beibehalten des Seitenverhältnisses! (Ich bin mit Firefox 3.6) Wie kann ich den obigen code so, dass die Bilder behalten Ihr Seitenverhältnis? Danke.
    InformationsquelleAutor letronje
  3. 1

    Wenn Sie möchten, dass das Bild die Breite auf einen Prozentsatz von seinem container, und das Bild behält seinen ursprünglichen Seitenverhältnis, definieren Sie die Breite in Prozent, und legen Sie die Höhe auf auto:

    .wall_picture_block img{
    width: 20%; 
    height: auto;
}
    • Dies ist, was er will nicht, dass Alex.
    • Oh, bin davon ausgegangen, dass die ursprünglichen Bilder wurden Plätze, aber vielleicht ist das ja nicht der Fall.
    InformationsquelleAutor alexp
Schreibe einen Kommentar