如何在图像周围去除此锚标记的填充？

问题描述：

如何去除图片空白处的锚标签？现在空格是可点击的，我不希望这样。将鼠标悬停在图像周围的空白处，即可获得我正在谈论的内容。该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>

如何从图像周围的空格去掉标签的填充？任何帮助表示赞赏。

答

控制柔性物品的宽度，而不是图像。

更具体地说，将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

你能解释一下flex：0 0 25％;是什么？或者将我链接到关于它的文档？我目前正在使用移动设备，并且您的答案能够正常工作，一旦我在桌面上进行测试，我会将其标记为正确答案。谢谢。 –

这是'flex-grow'，'flex-shrink'和'flex-basis'的缩写。在这种情况下，它表示*不增长*，*不缩小*，设置25％的固定宽度。 –

答

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

这填满了图像本身的空白，我认为用户希望没有可点击的空白 –

然后他们周围的空白处不留。我想要那些空白 –

，如果你将它改为'.portfolio a {flex-basis：30％; }'，我想你会有一个可行的答案。 – worc

答

因为没有解释downvote的，我要解释一些事情（或询问）

通常如何计算宽度或高度？

https://www.w3.org/TR/CSS2/visudet.html#the-width-property

<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

填充/边距上的百分比问题仅适用于弹性项目，而不适用于弹性容器。 –

@Michael_B FF在屏幕上调整图像尺寸时经常会出现bug，但不会从最初使用的空间开始...... vw单位可以避免我最近注意到的这种有趣的行为。不知道是否有任何错误已经官方写过，或者是否还有其他问题涉及。没有挖 –

答

好的，我想我明白你正在尝试做什么。您的图像设置为宽度：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>

答

.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>

如何在图像周围去除此锚标记的填充？

相关推荐