Positionierung eines relativen img in css

Question

Ich lerne derzeit HTML in der Schule und ich habe ein bisschen Mühe mit der Positionierung eines Bildes, das in einem div ist. Heres meine HTML-Code:

.bild1 { 
 
    position:relative; 
 
    top:500 px; 
 
    max-width:50%; 
 
    max-height:50%; 
 
}

<div class="bild1"> 
 
    <img src="http://cms.immoscout24.ch/media/1341/umzug-ostern.jpg"> 
 
</div>

Wer weiß, wie ich ein Bild das ist relativ positionieren kann (es muss in Bezug auf sein)

Answer 1

Ihre top: 500 px; binden ein Platz zwischen 500 und px, so dass es nicht akzeptiert. ändern Sie ihn auf top: 500px;

.bild1 { 
 
    position:relative; 
 
    top: 500px; 
 
    max-width:50%; 
 
    max-height:50%; 
 
}

<div class="bild1"> 
 
    <img src="http://cms.immoscout24.ch/media/1341/umzug-ostern.jpg"> 
 
</div>

Wenn Sie das Bild wollen diese Eigenschaften erhalten hinzufügen img nach dem .bild1, wie so .bild1 img { ...

.bild1 img { 
 
    position:relative; 
 
    top: 500px; 
 
    max-width:50%; 
 
    max-height:50%; 
 
}

<div class="bild1"> 
 
    <img src="http://cms.immoscout24.ch/media/1341/umzug-ostern.jpg"> 
 
</div>

Hoffe es hat geholfen

Answer 2

.bild1{width:200px;height:200px;} 
 
.bild1 img{max-width:100%;}

<div class="bild1"> 
 
     <img src="http://cms.immoscout24.ch/media/1341/umzug-ostern.jpg"> 
 
    </div>

Answer 3

zu Holen Sie sich die Position: relative Arbeit an dem Bild, das Sie an das Bild übergeben müssen.

Diese die CSS binden nur von der Klasse bild1

.bild1 { 

Dies wird die CSS auf dem img-Element innerhalb der Klasse bild1

.bild1 img { 
 
    position:relative; 
 
    top:500 px; 
 
    max-width:50%; 
 
    max-height:50%; 
 
}

<div class="bild1"> 
 
     <img src="http://cms.immoscout24.ch/media/1341/umzug-ostern.jpg"> 
 
    </div>