繁体   English   中英

标题如何随图像移动?

[英]How to have the caption move with the image?

当页面调整大小时(如用户使页面变长/变宽),我如何获得与图像一起移动的标题? 以及如何获得标题以随图像移动而不固定在原处?

如果您认为这不是一个正确的问题,或者陈述不正确,请不要删除我的问题。

CSS:

#caption {
    position: absolute;
    padding: 10px;
    box-sizing: border-box;
    color: white;
    font-size: 14pt;
    font-family: sans-serif;
    background-color: #008800;
    opacity: 0.5;
    text-align: left;
    bottom:0px;
}

HTML:

<div style="text-align: Center;" id="photoSection">
    <img  id='photo' src='memchu.jpg' alt='photo' />
    <div id="caption">
        Stanford Memorial Church - the church used to have an 80' bell tower, which fell in the 1906 earthquake.
    </div>
    <div id="forwardOverlay"></div>
    <div id="backwardOverlay"></div>
</div>

JS:

"use strict";

var photoArray = [
    {filename: "memchu.jpg",
     caption: "Stanford Memorial Church - the church used to have an 80 bell tower, which fell in the 1906 earthquake."},
    {filename: "quad.jpg",
     caption: "The Stanford Quad"},
    {filename: "hoop.jpg",
     caption: "The <i>Red Hoop Fountain</i> with Green Library in the background."},
    {filename: "memorial-court.jpg",
     caption: "Memorial Court (in the front of the Quad) with Rodin's <i>Burghers of Calais</i> statues."},
    {filename: "gates.jpg",
     caption: "The Gates Building - home of Stanford Computer Science."},
    {filename: "stone-river.jpg",
     caption: "The Stone River statue near the Cantor Arts Center (Stanford's own art museum)."},
];

我试过了 :

position: absolute;

但是调整页面大小时,这似乎并没有保留我对图像的标题。

我认为这是您的追求,关键是在父母身上显示:表

#photoSection{display:table;margin:0 auto;position:relative;}
#photoSection img{max-width:100%;}
#caption {
 position:absolute;
 padding: 10px;
 color: white;
 font-size: 14pt;
 font-family: sans-serif;
 background-color: #008800;
 opacity: 0.5;
 text-align: left;
 bottom:0;
}

https://jsfiddle.net/sjmcpherso/dz0dyu6v/

暂无
暂无

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM