Установите высоту в соответствии с изображением с динамической высотой

Question

На данный момент я использую следующий код:

CSS

.photo-medium { 
    background-attachment : scroll; 
    background-color : #222222; 
    background-repeat : no-repeat; 
    background-position : center center; 
    background-size : contain; 
    border-radius : 0; 
    margin : 0 0 30px -10px; 
    width : 100%; 
} 

PHP & HTML

# VARIABLE 
$photo_750 = 'images/photos/'.$photo['data_file_name'].'-750.'.$photo['data_file_type']; 

# DIMENSION 
list($image_width, $image_height) = getimagesize($photo_750); 


# THE PHOTO 
echo '<div class="photo-medium" style="background-image: url('.url($photo_750).'); height: '.$image_height.'px;"></div>'; 

# THE CONTENT 
echo '<div style="margin-top: '.$image_height.'px;">'; 
    echo '...'; 
echo '</div>'; 

И вот как это выглядит с помощью этого кода (измените размер окна браузера до 750 пикселей ls, чтобы увидеть его): http://mitt-galleri.nu/P1290364.

С этим решением высота DIV всегда равна высоте изображения, независимо от размера окна. Я хочу установить высоту DIV (не только изображение) в соответствии с высотой изображения. Я проверил min-height: 100%, но цвет фона все еще виден. DIV просто становится меньше на высоте, чем без min-height: 100%.

У меня также есть margin-top: '.$image_height.'px по содержанию ниже photo-medium, так как я использую position: absolute. Я также хочу, чтобы это имело динамическую высоту в соответствии с высотой изображения.

Как исправить эту «проблему»?

Answer 1

Если вам действительно не нужно, то зачем ставить его как фоновое изображение? Добавьте его как тег img, установите ширину 100%, высоту auto и не устанавливайте высоту в родительском div.