根据图像大小制作标题我该如何解决这个问题？

Question

我有一张图片，并在图片顶部显示h2标题...

以下是供您参考的屏幕截图：

我想要这样的东西

CSS ：

h2 {
  position: relative;
  letter-spacing: 1px;
  display: inline-block;
  position: relative;
  background: #222;
  padding: 11px;
  top: 195px;
  opacity: .8;
  font-size: 13px;
  /* left: 349px; */
  text-align: left;
  /* bottom: -52px; */ 
  width: 100%;

.post img {
  margin-left: 1px;
  margin-top: -32px;
}

我不太了解JS或jQuery：有没有任何方法只显示2或3个单词？我认为可以解决这个问题。 在此先感谢您的帮助。

Answer 1

我很确定你不需要任何JS来获得你需要的东西。看看这个例子小提琴：http://jsfiddle.net/yMYD7/

示例HTML结构：

<div id="wrapper">
    <img src="path_to_img" alt=""/>
    <div class="title">
            Lorem ipsum dolor sit....
    </div>
</div>

这里没有JavaScript。试着找出类似的东西，使用HTML和CSS。如果不需要JavaScript，则应该避免使用。

Answer 2

之所以发生这种情况，是因为您正在使用h2 css：

padding: 11px;
width: 100%;

因此它将导致宽度100％+ 11px（填充左侧）+ 11px（填充右侧）

只需删除width: 100%即可，因为默认情况下，h2适合100％

Answer 3

正如其他人所说，解决方案是在css中，这是因为填充被添加到100％之上;

h2 {
  position: relative;
  width: auto;
  left: 0;
  right: 0;
}

不确定您的具体情况，但这可能会解决问题。