Größe div, um bestimmtes Element zu passen

Question

Ich versuche, ein Bild automatisch zuzuschneiden, um hinter einer Leinwand (http://webglworkshop.com/js-test.html) zu passen.

Ich habe ein div, die eine Leinwand und ein Bild enthält, und die CSS unter:

div.carouselContainer { 
    height: 300px; 
    border: 5px solid blue; 
    overflow: hidden; 
} 

.webgl { 
    position: absolute; 
    top: 10px; 
    border: 5px solid green; 
} 

.backgroundImage { 
    display: inline; 
} 

Dies funktioniert nach einer Art und Weise, aber ich habe einen harten codiert height Wert in div.carouselContainer verwenden.

Ich möchte die height Eigenschaft entfernen und das div automatisch die Größe anpassen, um nur an die Leinwand anzupassen.

Ist dies möglich, ohne die background Eigenschaft zu verwenden und JS nicht zu verwenden?

TIA

Answer 1

Sie können die position: absolute von der Leinwand, entfernen und stattdessen es auf dem Bild platzieren. Dadurch wird die Höhe des Containers durch die Höhe des Canvas festgelegt, und das Bild wird durch den Container overflow: hidden abgeschnitten.

Answer 2

Sie können das img-Tag entfernen und das Bild als Hintergrundbildattribut für das carouselContainer-div verwenden, sodass die Bildgröße die div-Größe nicht beeinflusst.

HTML:

<div class="carouselContainer"> 
    <canvas width="1505" height="393" class="webgl webgl-head" style="width: 1505px; height: 393.3px;"></canvas> 
</div> 

CSS:

div.carouselContainer { 
    background-image: url(code/img/milky.jpg); 
    background-position-y: 90%; 
} 

/* .webgl removed */ 

Stellen Sie die Hintergrundposition mit Hintergrund-Position-y. Wenn Sie die Leinwand verschieben müssen, können Sie jetzt margin-top oder padding-top verwenden.