wake-up-neo.com

Volles Bild mit fester Höhe

Ich versuche, ein Bild zu erstellen, das wie das Titelbild here aussieht und nur css und html verwendet. Ich habe verschiedene Dinge ausprobiert, aber bisher hat nichts funktioniert.

Dies ist mein HTML-Code:

<div id="container">
    <img id="image" src="...">
</div>

Welchen CSS-Code sollte ich verwenden?

7
Simon

Stellen Sie width des Bildes auf 100% ein, und height des Bildes wird automatisch angepasst:

<img style="width:100%;" id="image" src="...">

Wenn Sie ein benutzerdefiniertesCSShaben, dann:

HTML:

<img id="image" src="...">

CSS: 

#image
{
    width: 100%;
}

Beim nächsten Mal könnten Sie auch File -> View Source oder Google tun.

16
Cilan

Wenn Sie dasselbe Verhältnis haben möchten, sollten Sie einen Container erstellen und einen Teil des Bildes ausblenden.

.container{
  width:100%;
  height:60px;
  overflow:hidden;
}
.img {
  width:100%;
);
<div class="container">
  <img src="http://placehold.it/100x100" class="img" /> 
</div>

   

Dies kann auf verschiedene Arten geschehen. Ich mache es normalerweise aus meiner Klasse.

Aus der Klasse 

.image
{
    width:100%;


}

und dazu wäre Ihre HTML:

<img class="image" src="images/image_name">

oder wenn Sie es mit Inline-Styling gestalten möchten, hätten Sie einfach Folgendes:

<img style="width:100%; height:60px" id="image" src="images/image_name">

Ich empfehle jedoch, dies von Ihrem externen Stylesheet aus zu tun, da Sie mit zunehmendem Projekt feststellen werden, dass die gesamte Sache mit separaten Dateien für Ihre HTML-Datei und Ihre CSS einfacher zu verwalten ist. 

2

Um das Bild nicht zu zerkratzen, müssen Sie Folgendes verwenden:

max-height: 200px;
width: auto;
2
raBne

Legen Sie die Höhe des übergeordneten Elements fest und geben Sie die Breite an. Dann benutze ein Hintergrundbild mit der Regel "background-size: cover"

    .parent {
       background-image: url(../img/team/bgteam.jpg);
       background-repeat: no-repeat;
       background-position: center center;
       -webkit-background-size: cover;
       background-size: cover;
    }
0
Mark
<div id="container">
    <img style="width: 100%; height: 40%;" id="image" src="...">
</div>

Ich hoffe, das wird deinem Zweck dienen.

0
Palak Jain

Wenn Sie das Verhältnis Ihres Bildes nicht verlieren möchten, kümmern Sie sich nicht um height:300px; und verwenden Sie einfach width:100%;.

Wenn das Bild zu groß ist, müssen Sie es mit einem Bildeditor beschneiden. 

0
Martin42006