0

テキスト情報を表示したい画像があります。その下に、透明な背景とすべてがフォーマットされた情報を含む div があります。を使用margin-top: -50%して画像の上に引き上げることができますが、グリッド ( 1140 ) を使用しているため、画面が縮小されると一致しません。

これが私がこれまでに持っているものです：

HTML (スリム)

.fourcol
  .book
    img src="#{book.image_url}"
    .book-info
      header
        h4.title
          = book.title
        h6.author
          = book.author
      p.description
        = book.description

関連する CSS:

.book-info {
      margin-top: -62%;
      padding: 1em;
      padding-bottom: 1.5em;
      float: left;
      background-color: black;
      opacity: .8; }

book-info が常に画像の一番下にくるように拡大縮小するにはどうすればよいですか?

4

2 に答える 2

1

position: absoluteonを使用して、.book-infoに対して配置でき.bookます。

.book {
    position: relative;
    overflow: hidden; /* to clear the floats inside */
}

.book-info {
    position: absolute;
    bottom: 0;
}

デモを参照してください。

于 2012-07-09T00:41:36.857 に答える
0

画像も含むラッパーに、情報を含む div を配置する必要があります。

<style type="text/css">
    #info 
    {
        position: relative;
        bottom: 0px;
        width: 100%;
        height: 4%;
        opacity: 0.5;
    }
    #theImage
    {
        width: 100%;
        height: 100%;
    }
    #wrapper
    {
         width: 15%;
         height: 15%;
         overflow: hidden;
    }
</style>

<div id="wrapper">
    <img id="theImage" src="..." alt="" />
    <div id="info">Information about the image</div>
</div>
于 2012-07-09T00:47:12.767 に答える