創建一個響應<figcaption>

我有一個網站，當用戶懸停在圖像上，figcaption會滑動。創建一個響應<figcaption>

我的屏幕分辨率是1024 x 768，圖像分辨率是300 x 400像素。它適用於我的屏幕分辨率。最近我意識到一個響應式網站的重要性，所以我試圖將我的整個網站變成一個響應式網站。但是，然後我的figcaption不會像1366 x 768分辨率的工作。下面是我使用的代碼和試圖解釋我遇到的問題的圖像。

我使用的每張圖都是300x400。我在#hello圖中使用了寬度：30％，因爲有3張圖片，所以我給它們分別設置了一個寬度：30％。

守則image.php：

<div id="hello"> 
    <figure> 
     <img src="hello.png" alt="hello"/> 
      <figcaption> 
       <p>Hello </p> 
       <br/> 
       <p>Hello everyone!</p> 
      </figcaption> 
    </figure> 
</div>

我的CSS：

#hello{ 
    width:100%; 
} 

#hello figure{ 

    width: 30%; 
    height: 400px; 
    overflow:hidden; 
    float:left; 
    text-align: center; 
    font-size: 15px; 
    font-family: 'Fredericka the Great', cursive; 
    font-weight: bold; 
    display: block; 
    padding:0; 
    margin: 15px; 
} 

#hello figcaption{ 
    position: relative; 
    top: -105px; 
    background: rgba(239, 239, 239, 0.6); 
    -webkit-transition: top 1s ease; 
    -ms-transition: top 1s ease; 
    -moz-transition: top 1s ease; 
    -o-transition: top 1s ease; 
} 

#hello figure:hover figcaption{ 
     top:-210px; 
    }

當它在1024×768的分辨率，它有沒有問題：

（還未出現徘徊1024×768分辨率）

enter image description here

懸停在1024×768分辨率

enter image description here

當它在1366×768分辨率，它具有figcaption溢出的問題。

enter image description here

請與我分享你的寶貴的知識和建議。非常感謝。

編輯：如果我設置figcaption寬度爲300像素的（增加線寬：300到#hello figcaption），它是這樣的：

enter image description here

來源

2013-07-13 Hold_My_Anger

爲什麼不使圖像或圖形元素的標題寬？ – user1721135

我試圖將figcaption的寬度設置爲300px，但那不起作用。我添加了另一張圖片，我將figcaption的寬度設置爲300px。 –

您可以設置寬度figcaption或figure它的工作原理：

img { 
    width:300px; 
} 
figure { 
    outline:solid; 
    width:300px; 

} 
figcaption { 
    outline:solid; 

}

演示：http://jsbin.com/ogoxop/1/edit

對於真實的響應式佈局，您可能還希望使用媒體查詢來根據設備調整寬度。

來源

2013-07-13 22:08:49 user1721135

是啊，好像我需要使用媒體查詢。謝謝 –

我想，也許你想是這樣的：http://jsfiddle.net/weCLp/

您設置包裝上，以position: relative;，以及字幕position: absolute; bottom: 0; width:100%，讓他們在底部，和安裝在容器

#hello{ 
    width:100%; 
} 

#hello figure{ 
    width: 25%; 
    overflow:hidden; 
    float:left; 
    text-align: center; 
    font-size: 15px; 
    font-family: 'Fredericka the Great', cursive; 
    font-weight: bold; 
    display: block; 
    padding:0; 
    margin: 15px; 
    position: relative; 
} 

#hello figcaption{ 
    position: absolute; 
    bottom: 0; 
    height: 3em; 
    width: 100%; 
    background: rgba(239, 239, 239, 0.6); 
    -webkit-transition: all 1s ease; 
    -ms-transition: all 1s ease; 
    -moz-transition: all 1s ease; 
    -o-transition: all 1s ease; 
} 

#hello figure:hover figcaption{ 
     height: 6em; 
    } 

img { 
    width: 100%; 
}

（編輯：錯過了你希望整個圖像始終可見）

來源

2013-07-13 22:19:23

創建一個響應<figcaption>

回答

相關問題