錨定標記中的環繞動態img標記

我在錨點和圖像標記中遇到了一些問題。我的圖片標籤都坐在裏面（實質上）是div標籤，div標籤具有恆定的高度和寬度值。圖像標籤被賦予一個恆定的高度值，所以它們的寬度可以根據它們的高寬比進行計算，並且圖像在調整大小以適應div內容時不會變形。錨定標記中的環繞動態img標記

我想有一個圍繞每個圖像的錨標記有兩個原因。（1.）因此，圖像可以充當鏈接，但也可以（2.），以便當用戶懸停在圖像上時，我可以在圖像頂部顯示疊加層。

將圖片標籤放在錨標籤內解決了鏈接的問題，但對於第二個問題，我很難過。我需要錨標籤來動態調整大小並將其自身放置在各自的圖像標籤上。理想情況下，我想避免使用JavaScript來解決問題，並堅持CSS（如果可能）。如果需要，我不反對增加一些額外的標記。

相關HTML：

<listitem> 

    <a href="#"><img src="../images/image1.jpg"/></a> 

</listitem> 

<!--More listitems with different sized images go here-->

而CSS：

#pictureListContainer listitem { 

    position: relative; 
    background-color: rgba(0,0,0,0.5); 
    display: block; 
    height: 257px; 
    width: 636px; 
} 

#pictureListContainer listitem img { 

    position: relative; 
    float: right; 
    height: 203px !important; 
    vertical-align: middle; 
    margin: 21px 296px 21px auto; 

    border: 6px solid white; 
    border-radius: 6px; 
    box-shadow: 0px 0px 3px rgba(0,0,0,0.7); 
}

在此先感謝。

更新：我也許應該清楚說明，我希望疊加層具有與圖像相同的尺寸，以便它只覆蓋圖像。

來源

2013-05-15 baxterma

是否有一個原因，您使用的是自定義的'listitem'標籤，而不是實際列表項標籤（'li'）？ – MMM

不是真的，除了我寧願不處理'ul's。說實話，它並沒有真正跨越我的想法。 :) – baxterma

如果沒有理由，你不應該使用這樣的標籤。相反，使用'span'或'div'。請記住，大多數瀏覽器中的未知標籤都被視爲內聯元素。 – MMM

其可僅使用CSS和HTML來完成：JSFiddle

HTML

CSS

.listitem { 

    position: relative; 
    background-color: rgba(0,0,0,0.5); 
    display: block; 
    height: 257px; 
    width: 636px; 
    overflow: hidden; 
} 

.listitem img { 

    position: relative; 
    float: right; 
    height: 203px !important; 
    vertical-align: middle; 
    margin: 21px 296px 21px auto; 

    border: 6px solid white; 
    border-radius: 6px; 
    box-shadow: 0px 0px 3px rgba(0,0,0,0.7); 
    position: relative; 
} 

.listitem a span { 
    display: none; 
    position: absolute; 
    bottom: 10px; 
    left: 0; 
    background-color: rgba(0, 0, 0, 0.6); 
    width: 100%; 
    padding: 10px; 
    color: #FFF; 
} 

.listitem a:hover span { 
    display: block; 
}

編輯：覆蓋適合於圖像

JSFiddle

CSS

.listitem { 

    position: relative; 
    background-color: rgba(0,0,0,0.5); 
    display: block; 
    height: 257px; 
    width: 636px; 
} 

.listitem img { 
    border: 6px solid white; 
    border-radius: 6px; 
    box-shadow: 0px 0px 3px rgba(0,0,0,0.7); 
} 

.listitem a { 
    position: relative; 
    overflow: hidden; 
    display: inline-block; 
} 

.listitem a span { 
    display: none; 
    position: absolute; 
    bottom: 10px; 
    left: 0; 
    background-color: rgba(0, 0, 0, 0.6); 
    width: 100%; 
    padding: 10px; 
    color: #FFF; 
} 

.listitem a:hover span { 
    display: block; 
}

來源

2013-05-15 10:46:50

感謝您的回答Vimal，但是會否有辦法讓span標籤具有與img標籤相同的尺寸？謝謝。 – baxterma

@baxterma我已經更新了答案。 –

奇妙的，Vimal。謝謝！ – baxterma

您可以使用onClick的圖像

<img src="" onClick="" />

這將消除產生像疊加功能，等，爲a標籤的膩味，你可以得到兩者的效果同時工作。

希望這會有所幫助。

來源

2013-05-15 10:43:26 Nitesh

錨定標記中的環繞動態img標記

回答

相關問題