Question

我有两个图像显示在两个div框中。我想要修复框位置以及图像上的文本叠加（字幕）。图像不断变化，尺寸各不相同，因此固定盒子的大小可以防止页面元素跳转。

我不是这方面的专家，我遵循了一些教程来实现这一目标，主要是here和here。

正在播放的代码可以找到并修改here，也会粘贴在下面。

我正在寻找标题背景与标题完全相同的宽度。当图像非常小时（在这种情况下可能包裹），不会溢出图像的一侧。

HTML：

<div class="outer">  
<div class="container">
    <div class="wraptocenter">
        <span class="wrimg">
            <div class="shrinkwrapImage">
                <h3 class="caption">Image Caption 1</h3>
                <img src="http://www.google.fr/images/logos/ps_logo2.png" />
            </div>
        </span>

    </div>
</div>
<div class="container">
    <div class="wraptocenter">
        <span class="wrimg">
            <div class="shrinkwrapImage">
                <h3 class="caption">Image Caption 2</h3>
                <img src="http://www.google.fr/images/logos/ps_logo2.png" width="30%"/>
            </div>
        </span>
    </div>
</div>
</div>

CSS：

    .container * {
        border:1px solid;
    }
    .container {
        position:relative;
        height:400px;
        width:400px;
        margin:0 auto;
    }
    .caption {
        position:absolute;
        padding:0.05em;
        top:0.1em; left:120px; right:120px;
        color: white;
        background: rgb(0, 0, 0); /* fallback color */
        background: rgba(0, 0, 0, 0.4);
        font: 14px Helvetica, Sans-Serif;
        text-align:center;
    }
    .wraptocenter .wrimg{
        display: table-cell;
        text-align: center;
        vertical-align: middle;
        width: 400px;
        height: 400px;
    }
    .wraptocenter * {
        vertical-align: middle;
    }
    .wraptocenter {
        display: block;
    }
    .wraptocenter span {
        display: inline-block;
        height: 100%;
        width: 1px;
    }
    .wraptocenter .wrimg img{
        box-shadow: 0px 0px 0.5em #000000;
        border-radius:0.5em;

        max-width:400px;
        max-height:400px;
    }
    .shrinkwrapImage {
        position : relative;
    }

Answer 1

我想到的解决方案是使用背景图片

HTML

<div id="pictures">
    <div id="picture1">
        <h3 class="caption">Image Caption 1</h3>
    </div>
</div>

CSS

#picture1 { background: url(http://www.google.fr/images/logos/ps_logo2.png) top center no-repeat; width: 400px; height: 500px; }

Answer 2

请记住，CSS中的关键字“表达式”基本上是在你的CSS中使用JS，它只适用于IE＆lt; 8。

我认为我在这里得到了你所期望的http://jsfiddle.net/sanbor/3Gb6e/8/

Answer 3

以下是您的解决方案： http://jsfiddle.net/vonkly/D9hB3/

根据要求，容器（黄色背景）是固定大小。标题目前位于图像的顶部;只需调整top: 0;的css中的.captioned span属性（注意：大约46％将为您提供垂直居中的标题）。图像可以是您想要的任何尺寸;标题将始终位于您指定的区域（并且具有适当的宽度）。

<强> CSS

.container{
    display: table;
    background: yellow;
    height: 400px;
    width: 400px;
}
.centeritall {
    text-align: center;
    display: table-cell;
    vertical-align: middle;
}
.centeritall .imageWrap {
    position: relative;
    top: 0;
    left: 0;
    display: inline-block;
}
.imageWrap span {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    color: #fff;
    background-color: black;
}

<强> HTML

<div class="container">
    <div class="centeritall">
        <div class="imageWrap">
            <img src="http://www.placehold.it/300x200" />
            <span>This is a caption for the image...</span>
        </div>
    </div>
</div>

将文本叠加在div容器中的图像上

3 个答案: