html - 如何在图像上正确重叠文本

Question

让我的文字只显示在我的图像中时遇到了一些麻烦。这取决于文本的长度，如果它有两行长，那么它会显示正确。再长一点，它就会超出图像。我可以通过为我的 featured_wrapper 设置 bottom: 25px; 来解决这个问题，但我认为这不是一个好的修复。如果文本只有 2 行长，那么它会将文本设置得比应有的高。请问我应该如何正确设置文本，以便它始终保留在图像中。

<div id="featured_item">
  <a href="http://bandwagonbible.com/Fitness/GettingSixPackAbs" id="featured_link">
    <picture id="featured_picture">
      <img src="http://bandwagonbible.com/Stories/Fitness/GettingSixPackAbs/Image2.jpg" id="featured_image" alt='' />
    </picture>
    <div id="featured_wrapper">
      <h3 id="featured_title">
        A Beginners Guide To Getting Six Pack Abs ... add in some more text
      </h3>
    </div>
  </a>
</div>

http://codepen.io/anon/pen/eZVdpq

Answer 1

在您的 #featured_wrapper 规则中将高度更改为自动

#featured_wrapper {
    bottom: -2px;
    box-sizing: border-box;
    color: rgb(40, 173, 230);
    height: auto;                 /*  <---  changed to auto  */

#featured_item {
    box-sizing: border-box;
    color: rgb(34, 34, 34);
    height: 173.813px;
    min-height: auto;
    min-width: auto;
    overflow-wrap: break-word;
    position: relative;
    width: 309.297px;
    word-wrap: break-word;
    perspective-origin: 154.641px 86.9063px;
    transform-origin: 154.641px 86.9063px;
    border: 0px none rgb(34, 34, 34);
    font: normal normal normal normal 16px / 24px ProximaNovaCond, sans-serif;
    margin: 0px 21px 0px 0px;
    outline: rgb(34, 34, 34) none 0px;
}

#featured_link {
    box-sizing: border-box;
    color: rgb(40, 173, 230);
    display: block;
    height: 173.813px;
    overflow-wrap: break-word;
    text-decoration: none;
    width: 309.297px;
    word-wrap: break-word;
    perspective-origin: 154.641px 86.9063px;
    transform-origin: 154.641px 86.9063px;
    background: rgb(245, 245, 245) none repeat scroll 0% 0% / auto padding-box border-box;
    border: 0px none rgb(40, 173, 230);
    font: normal normal normal normal 16px / 24px ProximaNovaCond, sans-serif;
    outline: rgb(40, 173, 230) none 0px;
    padding: 0px 0px 173.813px;
}

#featured_picture {
    box-sizing: border-box;
    color: rgb(40, 173, 230);
    overflow-wrap: break-word;
    text-rendering: optimizeLegibility;
    word-wrap: break-word;
    border: 0px none rgb(40, 173, 230);
    font: normal normal normal normal 16px / 24px ProximaNovaCond, sans-serif;
    outline: rgb(40, 173, 230) none 0px;
}

#featured_image {
    box-sizing: border-box;
    color: rgb(40, 173, 230);
    display: inline-block;
    height: 173.969px;
    max-width: 100%;
    overflow-wrap: break-word;
    text-rendering: optimizeLegibility;
    vertical-align: middle;
    width: 309.297px;
    word-wrap: break-word;
    perspective-origin: 154.641px 86.9844px;
    transform-origin: 154.641px 86.9844px;
    background: rgb(245, 245, 245) none repeat scroll 0% 0% / auto padding-box border-box;
    border: 0px none rgb(40, 173, 230);
    font: normal normal normal normal 16px / 24px ProximaNovaCond, sans-serif;
    outline: rgb(40, 173, 230) none 0px;
    overflow: hidden;
}

#featured_wrapper {
    bottom: -2px;
    box-sizing: border-box;
    color: rgb(40, 173, 230);
    height: auto;
    left: 0px;
    overflow-wrap: break-word;
    position: absolute;
    right: 20px;
    width: 289.297px;
    word-wrap: break-word;
    perspective-origin: 144.641px 45px;
    transform-origin: 104.641px 45px;
    border: 0px none rgb(40, 173, 230);
    font: normal normal normal normal 16px / 24px ProximaNovaCond, sans-serif;
    outline: rgb(40, 173, 230) none 0px;
}

#featured_title {
    box-sizing: border-box;
    color: rgb(255, 255, 255);
    display: inline;
    height: auto;
    overflow-wrap: break-word;
    position: relative;
    text-rendering: optimizeLegibility;
    width: auto;
    word-wrap: break-word;
    background: rgba(0, 0, 0, 0.701961) none repeat scroll 0% 0% / auto padding-box border-box;
    border: 0px none rgb(255, 255, 255);
    font: normal normal normal normal 22px / 22px ProximaNovaCond, sans-serif;
    margin: 0px 0px 0px;
    outline: rgb(255, 255, 255) none 0px;
    padding: 0px 10px;
    transition: all 0.1s ease-in-out 0s;
}

<div id="featured_item">
  <a href="http://bandwagonbible.com/Fitness/GettingSixPackAbs" id="featured_link">
    <picture id="featured_picture">
      <img src="http://bandwagonbible.com/Stories/Fitness/GettingSixPackAbs/Image2.jpg" id="featured_image" alt='' />
    </picture>
    <div id="featured_wrapper">
      <h3 id="featured_title">
        A Beginners Guide To Getting Six Pack Abs ... add in some more text
      </h3>
    </div>
  </a>
</div>

而且我认为您也不需要所有这些 CSS/标记，因此这里为您提供了一个简化版本。

#featured_item {
    position: relative;
    width: 309.297px;
    margin: 0px 21px 0px 0px;
}

#featured_link {
    display: block;
    position: relative;
    text-decoration: none;
}

#featured_image {
    max-width: 100%;
}

#featured_title {
    color: rgb(255, 255, 255);
    height: auto;
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    text-rendering: optimizeLegibility;
    background: rgba(0, 0, 0, 0.701961);
    font: normal 22px / 22px ProximaNovaCond, sans-serif;
    padding: 0px 10px;
    transition: all 0.1s ease-in-out 0s;
}

<div id="featured_item">
  <a href="http://bandwagonbible.com/Fitness/GettingSixPackAbs" id="featured_link">
    <img src="http://bandwagonbible.com/Stories/Fitness/GettingSixPackAbs/Image2.jpg" id="featured_image" alt='' />
    <div id="featured_title">
      A Beginners Guide To Getting Six Pack Abs ... add in some more text
    </div>
  </a>
</div>