Bild dazu bringen, ein Div zu strecken

StackOverflow https://stackoverflow.com/questions/41198

  •  09-06-2019
  •  | 
  •  

Frage

Wie kann ich ein Bild dazu bringen, die Höhe eines zu strecken? DIV Klasse?

Aktuell sieht es so aus:

Ich möchte jedoch, dass das DIV gestreckt wird, damit das Bild richtig passt, aber ich möchte die Größe des Bildes nicht ändern.

Hier ist das CSS für das DIV (das graue Feld):

.product1 {
    width: 100%;
    padding: 5px;
    margin: 0px 0px 15px -5px;
    background: #ADA19A;
    color: #000000;
    min-height: 100px;
}

Das auf das Bild angewendete CSS:

.product{
    display: inline;
    float: left;
}

Wie kann ich das beheben?

War es hilfreich?

Lösung

Hinzufügen overflow:auto; Zu .product1

Andere Tipps

Fügen Sie im Markup nach dem Bild etwas ein wie <div style="clear:left"/>.Etwas chaotisch, aber es ist der einfachste Weg, den ich gefunden habe.

Und wenn Sie schon dabei sind, geben Sie dem Bild einen kleinen Rand, damit der Text nicht daran anstößt.

Vorausgesetzt, @John Millikin ist korrekt, der Code

.product + * { clear: left; }

würde ausreichen, um dasselbe zu tun, ohne dass Sie den Code nach dem div manuell anpassen müssen.

Ein Trick, den Sie verwenden können, besteht darin, das festzulegen <div>Die Überlaufeigenschaft wird ausgeblendet.Dies zwingt Browser dazu, die physische Größe der Box zu berechnen, und behebt das seltsame Überlappungsproblem mit dem schwebenden Bild.Es erspart Ihnen das Hinzufügen zusätzlicher HTML-Markups.

So sollte die Klasse aussehen:

.product1 {
    width: 100%;
    padding: 5px;
    margin: 0px 0px 15px -5px;
    background: #ADA19A;
    color: #000000;
    min-height: 100px;
    overflow: hidden;
}

Das sieht nach einem Job für aus klarfix mir ...

Versuche Folgendes:

.Strech
{
    background:url(image.jpg);
    background-size:100% 100%;
    background-repeat:no-repeat;

    width:500px;
    height:500px;
}

display:inline  
float:left

ist dein Problem

Durch das Schweben wird die Breite des Elternteils nicht durch das Kind gedehnt. Versuchen Sie, das Bild ohne Schwebeteil zu platzieren.Wenn Sie den Schwimmer abnehmen, sollte der gewünschte Effekt erzielt werden.
Ein anderer Ansatz wäre, sicherzustellen, dass Sie Ihre Floats am Ende des übergeordneten Elements löschen, damit sie nicht in den Gültigkeitsbereich eindringen.

Aktualisieren: Nachdem Sie Ihren Link angesehen haben, liegt Ihr angezeigtes Höhenproblem daran, dass die Schwimmer nicht gelöscht werden.

Lizenziert unter: CC-BY-SA mit Zuschreibung
Nicht verbunden mit StackOverflow
scroll top