Question

我只在我的图片中显示文字时遇到了一些麻烦。它取决于文本的长度，如果它长两行，那么它将显示正确。它不再延伸超过图像。我可以通过为bottom: 25px;设置featured_wrapper来解决此问题，但我不认为这是Good修正。如果文本只有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  */

＆＃13;

#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;
}

＆＃13;

<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>

＆＃13;

我也不认为你需要所有的CSS /标记，所以这里有一个缩短的版本。

＆＃13;

#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;
}

＆＃13;

<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>

＆＃13;

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

1 个答案: