1. 首頁
  2. 問答
  3. 如何在圖像周圍去除此錨標記的填充？

如何在圖像周圍去除此錨標記的填充？

2017-10-10 66 views
2

如何去除圖片空白處的錨標籤？現在空格是可點擊的，我不希望這樣。將鼠標懸停在圖像周圍的空白處，即可獲得我正在談論的內容。該codepen鏈接https://codepen.io/sakirinteser/pen/rGvbmO如何在圖像周圍去除此錨標記的填充？

.portfolio h2 { 
 
    text-align: center; 
 
    font-size: 2.5em; 
 
    color: #27292d; 
 
    padding-top: 4%; 
 
    line-height: 1.3; 
 
} 
 

 
.port { 
 
    text-align: center; 
 
    color: #27292d; 
 
    padding-bottom: 3%; 
 
} 
 

 
.thumbs { 
 
    display: flex; 
 
    justify-content: space-around; 
 
    margin-bottom: 2%; 
 
} 
 

 
.thumbs img { 
 
    width: 60%; 
 
    padding: 0 !important; 
 
} 
 

 
.portfolio a { 
 
    margin: 0 auto; 
 
    text-align: center; 
 
}
<div class="portfolio"> 
 
    <section> 
 
    <h2>Past Work</h2> 
 
    <p class="port">We have worked on a diverse range of projects in the past, here is a quick snapshot:</p> 
 

 
    <div class="thumbs designthumbs"> 
 
     <a href="https://cmeimg-a.akamaihd.net/640/clsd/getty/c64f76dc20c246ca88ee180fe4b4b781" class="swipebox"><img class="wow animated fadeInLeft" src="https://cmeimg-a.akamaihd.net/640/clsd/getty/c64f76dc20c246ca88ee180fe4b4b781"></a> 
 
     <a href="https://cmeimg-a.akamaihd.net/640/clsd/getty/c64f76dc20c246ca88ee180fe4b4b781" class="swipebox"><img class="wow animated fadeInLeft" src="https://cmeimg-a.akamaihd.net/640/clsd/getty/c64f76dc20c246ca88ee180fe4b4b781"></a> 
 

 
    </div> 
 

 
    <div class="thumbs"> 
 
     <a href="https://cmeimg-a.akamaihd.net/640/clsd/getty/c64f76dc20c246ca88ee180fe4b4b781" class="swipebox"><img class="wow animated fadeInLeft" src="https://cmeimg-a.akamaihd.net/640/clsd/getty/c64f76dc20c246ca88ee180fe4b4b781"></a> 
 
     <a href="https://cmeimg-a.akamaihd.net/640/clsd/getty/c64f76dc20c246ca88ee180fe4b4b781" class="swipebox"><img class="wow animated fadeInLeft" src="https://cmeimg-a.akamaihd.net/640/clsd/getty/c64f76dc20c246ca88ee180fe4b4b781"></a> 
 
    </div> 
 
    </section> 
 
</div>

如何從圖像周圍的空格去掉標籤的填充？任何幫助表示讚賞。

來源

2017-10-10 Sakir Inteser

回答

3

控制柔性物品的寬度，而不是圖像。

更具體地說，將flex項目設置爲您的首選寬度，然後使圖像內部爲全寬（width: 100%）。

取而代之的是：

.thumbs { 
    display: flex; 
    justify-content: space-around; 
    margin-bottom: 2%; 
} 

.portfolio a { 
    margin: 0 auto; 
    text-align: center; 
} 

.thumbs img{ 
    width: 60%; 
    padding: 0 !important; 
}

試試這個：

.thumbs { 
    display: flex; 
    justify-content: space-around; 
    margin-bottom: 2%; 
} 

.portfolio a { 
    flex: 0 0 25%; /* new; flex-grow: 0, flex-shink: 0, flex-basis: 25% */ 
    /* margin: 0 auto; */ 
    /* text-align: center; */ 
} 

.thumbs img { 
    width: 100%; /* new */ 
    padding: 0 !important; 
    vertical-align: top; /* optional; to remove descender space; 
          https://stackoverflow.com/q/31444891/3597276 */ 
}

https://codepen.io/anon/pen/pWVmzy

來源

2017-10-10 18:25:12

+0

你能解釋一下flex：0 0 25％;是什麼？或者將我鏈接到關於它的文檔？我目前正在使用移動設備，並且您的答案能夠正常工作，一旦我在桌面上進行測試，我會將其標記爲正確答案。謝謝。 –

+1

這是'flex-grow'，'flex-shrink'和'flex-basis'的縮寫。在這種情況下，它表示*不增長*，*不縮小*，設置25％的固定寬度。 –

0

使.portfolio a{ width: 60%}和改變.thumbs img { width: 100%;}

來源

2017-10-10 18:18:57

+0

這填滿了圖像本身的空白，我認爲用戶希望沒有可點擊的空白 –

+0

然後他們周圍的空白處不留。我想要那些空白 –

+0

，如果你將它改爲'.portfolio a {flex-basis：30％; }'，我想你會有一個可行的答案。 – worc

0

因爲沒有解釋downvote的，我要解釋一些事情（或詢問）

<percentage>

指定百分比寬度。百分比是根據生成的框的包含塊的寬度計算的。如果包含塊的寬度取決於此元素的寬度，那麼在CSS 2.1中未定義生成的佈局。注意：對於其包含塊基於塊容器元素的絕對定位元素，將根據該元素的填充框的寬度計算百分比。

這是從CSS1的變化，其中百分比寬度總是相對於父元素的內容框進行計算。

  • 在這種情況下，IMG是不是塊和身體不是直接孩子，父母的寬度是basicly不明所以我們可能有60％×空這給空，沒有什麼應用真正

    • 但在這裏，我們有一個柔性孩子 ...它coud無需設置父寬度打工，但那時，如果圖像是其母公司的60％......家長不能100％這是它自己的60％。在邏輯中這裏有什麼錯誤，不是嗎？

所以爲了避免誤判和有趣的結果，一定要清楚，你可以使用大衆或任何單位，但％使寬度正確設置和計算...

/* trick to see where elements stand */ 
 

 
* {/* see me */box-shadow:0 0 0 2px red} 
 

 
.portfolio h2{ 
 
\t text-align: center; 
 
\t font-size: 2.5em; 
 
\t color: #27292d; 
 
\t padding-top: 4%; 
 
\t line-height: 1.3; 
 
} 
 

 
.port{ 
 
\t text-align: center; 
 
\t color: #27292d; 
 
\t padding-bottom: 3%; 
 
} 
 

 
.thumbs{ 
 
\t display: flex; 
 
\t margin-bottom: 2%; 
 
    /*padding:0 6.25vw; *//* a quart of img 's width that you can also calculate and set as padding to even the three blank space */ 
 
    justify-content:space-around; 
 
} 
 

 
.thumbs img{ 
 
\t max-width: 25vw; 
 
    vertical-align:top; 
 
} 
 

 
.portfolio a.swipebox{ 
 
    margin: 0 auto; 
 
    text-align: center; 
 
    flex-shrink:1; 
 
}
<div class="portfolio"> 
 
\t \t <section> 
 
\t \t \t <h2>Past Work</h2> 
 
\t \t \t <p class="port">We have worked on a diverse range of projects in the past, here is a quick snapshot:</p> 
 
\t \t \t <div class="thumbs designthumbs"> 
 
\t \t \t \t <a href="https://cmeimg-a.akamaihd.net/640/clsd/getty/c64f76dc20c246ca88ee180fe4b4b781" class="swipebox"><img class="wow animated fadeInLeft" src="https://cmeimg-a.akamaihd.net/640/clsd/getty/c64f76dc20c246ca88ee180fe4b4b781"></a> 
 
     <a href="https://cmeimg-a.akamaihd.net/640/clsd/getty/c64f76dc20c246ca88ee180fe4b4b781" class="swipebox"><img class="wow animated fadeInLeft" src="https://cmeimg-a.akamaihd.net/640/clsd/getty/c64f76dc20c246ca88ee180fe4b4b781"></a> 
 
\t \t \t \t 
 
\t \t \t </div> 
 

 
\t \t \t <div class="thumbs"> 
 
\t \t \t \t <a href="https://cmeimg-a.akamaihd.net/640/clsd/getty/c64f76dc20c246ca88ee180fe4b4b781" class="swipebox"><img class="wow animated fadeInLeft" src="https://cmeimg-a.akamaihd.net/640/clsd/getty/c64f76dc20c246ca88ee180fe4b4b781"></a> 
 
     <a href="https://cmeimg-a.akamaihd.net/640/clsd/getty/c64f76dc20c246ca88ee180fe4b4b781" class="swipebox"><img class="wow animated fadeInLeft" src="https://cmeimg-a.akamaihd.net/640/clsd/getty/c64f76dc20c246ca88ee180fe4b4b781"></a> 
 
\t \t \t </div> \t \t 
 
\t \t </section> 
 
\t </div>

fork of your pen

來源

2017-10-10 18:28:09

+0

填充/邊距上的百分比問題僅適用於彈性項目，而不適用於彈性容器。 –

+1

@Michael_B FF在屏幕上調整圖像尺寸時經常會出現bug，但不會從最初使用的空間開始...... vw單位可以避免我最近注意到的這種有趣的行爲。不知道是否有任何錯誤已經官方寫過，或者是否還有其他問題涉及。沒有挖 –

0

好的，我想我明白你正在嘗試做什麼。您的圖像設置爲寬度：60％，但它們位於大拇指容器一半的錨內。所以，真的，你的圖像是容器一半的60％，但錨點仍然是一半。

默認情況下，錨點上的flex屬性將爲flex: 0 1 auto，這對於不增長，縮小和自動確定此flex元素的寬度來說是短手。在這種情況下，auto會將包含元素的所有可用空間分配給子元素。

在你的情況下，有兩個錨點，他們兩個都被賦予了其容器中的剩餘空間，並且每個都以半個寬度結束。

所以，我把你的圖像切換到100％（包含它們的錨的全部寬度）。然後將主播flex屬性更改爲flex: 0 1 30%。所以它們將是它們包含元素寬度的30％。現在，你不應該在任何的利潤空間可點擊：

.portfolio h2 { 
 
    text-align: center; 
 
    font-size: 2.5em; 
 
    color: #27292d; 
 
    padding-top: 4%; 
 
    line-height: 1.3; 
 
} 
 

 
.port { 
 
    text-align: center; 
 
    color: #27292d; 
 
    padding-bottom: 3%; 
 
} 
 

 
.thumbs { 
 
    border: 2px solid black; 
 
    display: flex; 
 
    justify-content: space-around; 
 
    margin-bottom: 2%; 
 
    width: 500px; 
 
} 
 

 
/*.portfolio a*/ 
 
.thumbs a { 
 
    border: 2px dotted red; 
 
    flex: 0 1 30%; 
 
    /*margin: 0 auto;*/ 
 
    text-align: center; 
 
} 
 

 
.thumbs img { 
 
    border: 2px solid black; 
 
    width: 100%; 
 
    /*padding: 0 !important;*/ 
 
}
<div class="portfolio"> 
 
    <section> 
 
    <h2>Past Work</h2> 
 
    <p class="port">We have worked on a diverse range of projects in the past, here is a quick snapshot:</p> 
 

 
    <div class="thumbs designthumbs"> 
 
     <a href="https://cmeimg-a.akamaihd.net/640/clsd/getty/c64f76dc20c246ca88ee180fe4b4b781" class="swipebox"><img class="wow animated fadeInLeft" src="https://cmeimg-a.akamaihd.net/640/clsd/getty/c64f76dc20c246ca88ee180fe4b4b781"></a> 
 
     <a href="https://cmeimg-a.akamaihd.net/640/clsd/getty/c64f76dc20c246ca88ee180fe4b4b781" class="swipebox"><img class="wow animated fadeInLeft" src="https://cmeimg-a.akamaihd.net/640/clsd/getty/c64f76dc20c246ca88ee180fe4b4b781"></a> 
 

 
    </div> 
 

 
    <div class="thumbs"> 
 
     <a href="https://cmeimg-a.akamaihd.net/640/clsd/getty/c64f76dc20c246ca88ee180fe4b4b781" class="swipebox"><img class="wow animated fadeInLeft" src="https://cmeimg-a.akamaihd.net/640/clsd/getty/c64f76dc20c246ca88ee180fe4b4b781"></a> 
 
     <a href="https://cmeimg-a.akamaihd.net/640/clsd/getty/c64f76dc20c246ca88ee180fe4b4b781" class="swipebox"><img class="wow animated fadeInLeft" src="https://cmeimg-a.akamaihd.net/640/clsd/getty/c64f76dc20c246ca88ee180fe4b4b781"></a> 
 
    </div> 
 
    </section> 
 
</div>

來源

2017-10-10 18:32:17 worc

0 

.portfolio h2 { 
 
    text-align: center; 
 
    font-size: 2.5em; 
 
    color: #27292d; 
 
    padding-top: 4%; 
 
    line-height: 1.3; 
 
} 
 

 
.port { 
 
    text-align: center; 
 
    color: #27292d; 
 
    padding-bottom: 3%; 
 
} 
 

 
.thumbs { 
 
    display: flex; 
 
    justify-content: space-around; 
 
    margin-bottom: 2%; 
 
} 
 

 
.thumbs img { 
 
    width: 100%; 
 
    padding: 0 !important; 
 
} 
 

 
.portfolio a { 
 
    margin: 0 auto; 
 
    text-align: center; 
 
    width: 30%; 
 
}
<div class="portfolio"> 
 
    <section> 
 
    <h2>Past Work</h2> 
 
    <p class="port">We have worked on a diverse range of projects in the past, here is a quick snapshot:</p> 
 

 
    <div class="thumbs designthumbs"> 
 
     <a href="https://cmeimg-a.akamaihd.net/640/clsd/getty/c64f76dc20c246ca88ee180fe4b4b781" class="swipebox"><img class="wow animated fadeInLeft" src="https://cmeimg-a.akamaihd.net/640/clsd/getty/c64f76dc20c246ca88ee180fe4b4b781"></a> 
 
     <a href="https://cmeimg-a.akamaihd.net/640/clsd/getty/c64f76dc20c246ca88ee180fe4b4b781" class="swipebox"><img class="wow animated fadeInLeft" src="https://cmeimg-a.akamaihd.net/640/clsd/getty/c64f76dc20c246ca88ee180fe4b4b781"></a> 
 

 
    </div> 
 

 
    <div class="thumbs"> 
 
     <a href="https://cmeimg-a.akamaihd.net/640/clsd/getty/c64f76dc20c246ca88ee180fe4b4b781" class="swipebox"><img class="wow animated fadeInLeft" src="https://cmeimg-a.akamaihd.net/640/clsd/getty/c64f76dc20c246ca88ee180fe4b4b781"></a> 
 
     <a href="https://cmeimg-a.akamaihd.net/640/clsd/getty/c64f76dc20c246ca88ee180fe4b4b781" class="swipebox"><img class="wow animated fadeInLeft" src="https://cmeimg-a.akamaihd.net/640/clsd/getty/c64f76dc20c246ca88ee180fe4b4b781"></a> 
 
    </div> 
 
    </section> 
 
</div>

來源

2017-10-10 19:15:28

相關問題

 相關問題