0

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

该网站是http://bucksarms.co.uk如果您的浏览器大于 1400 像素，它会很好用，但是当您缩小它时，图像和标题不能正确缩放在一起。

这是 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;  
}

任何关于如何使用的想法都可以使用上面的代码或任何想法如何让页面不滚动到位置相对创建的间隙，都将受到欢迎。

干杯山姆

4

2 回答 2

0

尝试删除#hero上的 height 属性：/* height:680px; */

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

于 2013-07-13T23:21:36.950 回答
0

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

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

或者，您可以考虑在 div 上使用背景图像而不是图像标签 - 这样您的标题就可以自然地出现在图像前面。

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

于 2013-07-13T23:34:26.357 回答