可縮放，居中圖像鏈接

我使用HTML & CSS嘗試製作居中圖像，當您單擊它時，它會爲您提供全尺寸版本。該圖像也可以縮放，因此可以在較小的設備上縮放。現在我不擔心客戶端的帶寬。我遇到了可點擊區域位於圖片外部的問題，這使得它看起來像某種不可見的鏈接。可縮放，居中圖像鏈接

這是我的意思。 problem image

我有箭頭的所有區域用戶都可以點擊 - 但這沒有意義。我只想讓圖片可點擊。我可以使它工作，但我必須在標籤上使用內嵌塊，這會根據屏幕寬度而縮小縮放比例。

這是此部分的HTML。

<a class="image_link" href="/images/guides/wavelist_editing/fullsize/wave3.jpg"><img class="scalable_image popout_image centered" src="/images/guides/wavelist_editing/wave3.jpg"></a>

而CSS。

.content a:link.image_link { /*Not overqualified - overrides stuff on main.css. gets rid of the underline*/ 
    border-bottom: 0px none transparent; 
    text-decoration: none; 
    display:block; 
} 

.content .popout_image { 
    display: block; 
    margin-left: auto; 
    margin-right: auto; 
    box-shadow: 8px 8px 10px #555; 
    margin-bottom: 10px; 
    max-width: 100%; 
    min-width: 100px; 
} 

.content .scalable_image { 
    min-width: 100px; 
    max-width: 100%; 
    height: auto; 
    width: auto\9; /* ie8 */ 
}

爲了驗證此信息是分別在Firefox中的鏈接和圖像的計算值（第一圖像錯誤地顯示inline-block的，我把這個圖像中的測試，它實際上是塊 - 但是這兩個值引入錯誤，不結垢或太大點擊）： link stats img stats

我覺得我失去了一些東西真的很明顯。我不能谷歌這個，因爲「圖像鏈接」似乎是非常通用的。

來源

2014-10-05 Mgamerz

試試這個 - http://jsfiddle.net/drLd534s/ – Anonymous 2014-10-05 05:29:45

你Ç烏爾德實現這樣的：

的jsfiddle - DEMO

HTML：

<div class="content"> 
    <a class="image_link" href="/images/guides/wavelist_editing/fullsize/wave3.jpg"><img class="scalable_image popout_image centered" src="http://placehold.it/350x150"></a> 
<div>

CSS：

.content { 
    text-align: center; /* add this */ 
} 
.content a:link.image_link { 
    border-bottom: 0px none transparent; 
    text-decoration: none; 
    display: inline-block; /* add this */ 
} 
.content .popout_image { 
    display: block; 
    box-shadow: 8px 8px 10px #555; 
    margin-bottom: 10px; 
    max-width: 100%; 
    min-width: 100px; 
} 
.content .scalable_image { 
    min-width: 100px; 
    max-width: 100%; 
    height: auto; 
    width: auto\9; 
}

來源

2014-10-05 05:47:10 Anonymous

不得不添加很多新的對齊代碼到我的CSS中的其他項目，但它是加工。謝謝。 – Mgamerz 2014-10-05 05:50:43

這個怎麼樣？

<a href="#"> 
    <img src="https://www.google.com/images/srpr/logo11w.png" /> 
</a> 

a {display:inline-block;width:80%; height:auto} 

img {width:100%}

http://jsfiddle.net/ko2wzah9/

來源

2014-10-05 05:26:00 greener

圖像的父級不能是內聯塊。它必須是塊，否則圖像不能縮小，因爲它沒有相對的父親大小。奇怪的標準的事情。 – Mgamerz 2014-10-05 05:27:00

@Mgamerz然後我不知道我完全理解這個問題..你需要圖像縮放，但不是可點擊區域？ – greener 2014-10-05 05:28:44

可點擊區域應該與圖像相同。基本上圖像是鏈接，但如果我有最大尺寸，則不是左側或右側的區域。編輯：檢查jsfiddle似乎表明，它的工作原理就像我想要的。讓我執行它並檢查。最終編輯：這不會使圖像居中。 – Mgamerz 2014-10-05 05:34:28

據我瞭解，你需要這樣的

<!DOCTYPE html> 
    <html lang="en"> 
    <head> 
     <meta charset="UTF-8"> 
     <title>image link</title> 
    </head> 
    <body> 
     <a href="http://lorempixel.com/700/700" class="image-link"> 
     <img src="http://lorempixel.com/300/300" alt=""> 
     </a> 
    </body> 
    </html>

和CSS

a{ 
    display: inline-block; 
    position: static; 
} 

a img{ 
    position: relative; 
    z-index: 2; 
} 

a:before{ 
    content: ''; 
    position: fixed; 
    background: rgba(031, 031, 031, 0.7); 
    top:0; 
    left: 0; 
    width: 100%; 
    height: 100%; 
    z-index: 1; 
}

the example

來源

2014-10-05 05:43:40

也許我解釋它真的很糟糕，但瑪麗的評論正是我想要的：http://jsfiddle.net/drLd534s/ – Mgamerz 2014-10-05 05:45:13

可縮放，居中圖像鏈接

回答

相關問題