当页面大小调整(例如用户使页面更长/更宽时)时,如何让标题随图像一起移动?我怎样才能让标题随着图像移动而不是停留在原处?
如果您认为这不是一个合适的问题或者表述不正确,请不要删除我的问题。
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;
但是当页面大小调整时,这似乎并没有使我的标题与图像保持一致。
最佳答案
我认为这就是你想要的,关键是父级上的 display:table
#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;
}
关于javascript - 如何让标题随着图片一起移动?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/31735680/