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

Question

如何删除图像空白区域周围的锚标记？现在空格是可点击的，我不希望这样。将鼠标悬停在图像周围的空白处，你就会明白我在说什么。 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>

如何从图像周围的空白处删除 a 标签的填充？任何帮助表示赞赏。

Answer 1

创建.portfolio a{ width: 60%} 并更改.thumbs img { width: 100%;}

Answer 2

控制弹性项目的宽度，而不是图像。

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

Answer 3

由于没有解释的反对票，我必须解释几件事（或被问到）

• 通常如何计算百分比宽度或高度？

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

<percentage>

指定百分比宽度。百分比是根据生成框的包含块的宽度计算的。如果包含块的宽度取决于该元素的宽度，则结果布局在 CSS 2.1 中未定义。注意：对于包含块基于块容器元素的绝对定位元素，百分比是相对于该元素的填充框宽度计算的。

这是对 CSS1 的更改，其中百分比宽度始终根据父元素的内容框计算。

• 在这种情况下，img 不是块，也不是 body 的直接子代，父代的宽度基本上是未知的，所以我们可能有 60% x null 这给出了 null，没有什么可应用的

  • 但是这里我们有一个 flex 孩子 ...它可以工作而无需在父级上设置宽度，但是如果图像是其父级的 60% .. . 父母不能是它自己的 60% 的 100%。嗯，这里的逻辑有问题，不是吗？

所以为了避免计算错误和有趣的结果，请明确，您可以使用 vw 或除 % 以外的任何单位来正确设置和计算宽度...

/* trick to see where elements stand */

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

.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; 
	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{
	max-width: 25vw;
  vertical-align:top;
}

.portfolio a.swipebox{
  margin: 0 auto;
  text-align: center;
  flex-shrink:1;
}

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

fork of your pen

Answer 4

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

Answer 5

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