Größe eines Div basierend auf einem Hintergrundbild

Question

Ich muss dynamisch die Höhe eines divs, um sein Hintergrundbild anzuzeigen. Ich versuche, das funktioniert zu bekommen, damit ich den CSS-Transformations-Trick machen kann, wo du mit der Maus über ein div liegst und der Hintergrund sich vergrößert, aber meine Bilder werden verschiedene Größen haben. Jede Hilfe wird geschätzt ... Ich stecke fest!

CSS:

<style> 
.dynaimage{ 
    width:80%; 
    background-image:url('variable-image'); 
    background-size:100%; margin:0 auto; 
} 

</style> 

HTML:

<div class="dynaimage"></div> 
<p>The above div should take the height of its background image</p> 

Answer 1

Die Art und Weise dies die img-Tag durch die Verwendung zu tun, nicht background-image

Sie müssen jedes Bild in einem div wickeln. Setzen Sie das div auf overflow:hidden. Bildbreite muss 100% sein; Skalieren Sie die img mit transform:scale(x); Stellen Sie die Breite des Bildes mit der Breite der div ein.

Hier ist eine Demo

.img-wrap { 
 
    overflow: hidden; 
 
    display: inline-block; 
 
    /*width: 20%;*/ 
 
} 
 
.img-wrap img { 
 
    width: 100%; 
 
    -webkit-transition: 1s; 
 
    -moz-transition: 1s; 
 
    -ms-transition: 1s; 
 
    -o-transition: 1s; 
 
    transition: 1s; 
 
} 
 
.img-wrap:hover img { 
 
    transform: scale(1.2); 
 
}

<!-- Image size: 420 x 220 --> 
 
<div class="img-wrap"> 
 
    <img src="http://lorempixel.com/image_output/animals-q-c-420-220-3.jpg" alt=""> 
 
</div> 
 

 
<!-- Image size: 200 x 290 --> 
 
<div class="img-wrap"> 
 
    <img src="http://lorempixel.com/image_output/animals-h-c-200-280-2.jpg" alt=""> 
 
</div>