Question

我试图找出一种方法来使图像标题随图像调整大小并保持固定在图像的底部。我能够实现这一点的唯一方法是使用位置相对，但这意味着它下方的所有内容都必须向上移动，相对位置意味着页面向下滚动到远处。

该网站为http://bucksarms.co.uk，如果您的浏览器大于1400px，它可以很好地工作但是当您将其缩小时，图像和标题不能正确缩放。

这是HTML

<div id="hero">
            <img id="heroimage" src="images/contact.jpg" alt="The Bucks beautifull garden" />
            <?php include 'includes/header.php'; ?>


        <div id="feature">
            <div id="featuretitlecontainer">
                <div id="featuretitle">
                    Follow Us
                </div><!-- #featuretitle -->
            </div><!-- #featuretitlecontainer -->
            <div id="featurecontainer"> 
                <div id="featuretext">
                This 17th century pub is now embracing a 21st century digital age. Follow us on <a href="https://twitter.com/TheBucksArms">Twitter</a> to hear our latest offers first and keep up to date with whats going on at the Bucks. <p />
                </div><!-- #featuretext -->
            </div><!-- #featurecontainer -->

        </div><!-- #feature -->
    </div><!-- #hero -->

这是CSS

/* header */

#header {
    width:100%;
    background-color:#000;
    -khtml-opacity:.70; 
 -moz-opacity:.70; 
 -ms-filter:"alpha(opacity=70)";
  filter:alpha(opacity=70);
  filter: progid:DXImageTransform.Microsoft.Alpha(opacity=70);
  opacity:.70;
  position:absolute;
  top:0;
  z-index:3 !important;

}

#headercontent {

    width:960px;
    height:60px;
    margin:0 auto;
}

#logo {
    padding:23px 0 0 0;
    font-size:30px;
    width:320px;
    float:left;
    text-align:center;
    color:#FFF;
}

/* nav */

#nav {
    padding:36px 0 0 0;
    width:630px;
    float:right;
    margin:0px 0 0 0;
    text-align:right;
    color:#666;
}

/* hero */
#hero {
    width:100%;
    max-width:1400px;
    margin:0 auto;
    clear:both;
    position:relative;
    z-index:1;
    height:680px;

}

#heroimage {
    position:relative;
    top:0px;
    margin:0 auto;
    width:100%;
    z-index:1 !important;
}

/* Feature */
#feature {
    position:absolute;
    bottom:0;
    width:100%;
    margin:0 auto;
    z-index:2;
}

#featuretitle {
    -khtml-opacity:.70; 
 -moz-opacity:.70; 
 -ms-filter:"alpha(opacity=70)";
  filter:alpha(opacity=70);
  filter: progid:DXImageTransform.Microsoft.Alpha(opacity=70);
  opacity:.70; 
    font-size:25px;
    padding:5px 10px 5px 10px; 
    color:#FFF;
    text-align:center;
    background-color:#000;
    position:relative;
    top:0;
    width:300px;
    margin:0 0 0 650px;
}

#featuretitlecontainer {
    width:960px;
    margin:0 auto;  
}

#featurecontainer
{
position:relative;
    width:100%;
    background-color:#000;
    -khtml-opacity:.70; 
 -moz-opacity:.70; 
 -ms-filter:"alpha(opacity=70)";
  filter:alpha(opacity=70);
  filter: progid:DXImageTransform.Microsoft.Alpha(opacity=70);
  opacity:.70; 
}

#featuretext {
    padding:20px;
    margin:auto;
    width:940px;
    font-size:17px;
    color:#FFF;
    line-height:25px;
    background-color:#000;  
}

任何有关如何使用的想法都可以使用上面的代码或任何想法如何让页面不滚动到位置相对创建的差距，这将是非常受欢迎的。

干杯萨姆

Answer 1

尝试删除 #hero ：/* height:680px; */

上的height属性

您可以在后端对图像进行硬裁剪或放置overflow:hidden并为 #hero 指定max-height。

Answer 2

如果您将图像和标题放在同一个容器中，您可以执行以下操作：

.caption { 
  position: absolute; 
  bottom: 0px; 
  z-index: 3; // greater than img z-index if applicable
}

或者，您可以考虑在div上使用背景图像而不是图像标记 - 然后您的标题可以自然地在图像前面流动。

到目前为止，网站看起来相当不错。保持良好的工作。

标题自动调整图像，任何想法？

2 个答案: