目前,我正在使用以下代码:
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 像素以下以查看它):http://mitt-galleri.nu/P1290364 .
使用此解决方案,无论窗口大小如何,DIV
的高度始终与图像一样高。我想根据图像的高度设置 DIV
的高度(不仅是图像)。我已经测试了 min-height: 100%
但背景颜色仍然可见。 DIV
的高度比没有 min-height: 100%
时要小。
我还在 photo-medium
下面的内容上设置了 margin-top: '.$image_height.'px
因为我使用的是 position: absolute
。我还希望它根据图像的高度具有动态高度。
我该如何解决这个“问题”?
最佳答案
除非你真的必须,为什么要把它作为背景图片?将其添加为 img 标签,设置宽度 100%,高度自动,并且不要在父 div 上设置任何高度。
关于html - 根据动态高度的图像设置高度,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/28410822/