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

时间：2017-10-10 18:07:54

标签： html css image css3 flexbox

如何删除图像空白处的锚标记？现在空格是可点击的，我不希望这样。将鼠标悬停在图像周围的空白区域，您将得到我正在谈论的内容。 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>

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

5 个答案:

答案 0 :(得分：3)

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

更具体地说，将弹性项目设置为首选宽度，然后使内部图像采用全宽（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

答案 1 :(得分：0)

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

答案 2 :(得分：0)

由于没有解释的downvote，我必须解释一些事情（或要求）

  

<强> <percentage>

     

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

     

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

  • 在这种情况下，img不是块而不是body的直接子节点，parent的宽度基本上是未知的，所以我们可能有60％x null，它给出null，没有什么可以真正应用

    • 但这里我们有一个灵活的孩子 ...它可以在不需要在父级上设置宽度的情况下工作，但是如果图像是其的60％父母......父母不能100％拥有自己的60％。这个逻辑中有什么问题，不是吗？

因此，为了避免错误计算和有趣的结果，请注意，您可以使用大众或任何单位，但％可以正确设置和计算宽度......

＆＃13;
＆＃13; 
/* 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;
}
＆＃13; 
<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>
＆＃13;
＆＃13;
＆＃13;

fork of your pen

答案 3 :(得分：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>

答案 4 :(得分：0)

＆＃13;
＆＃13; 
.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%;
}
＆＃13; 
<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>
＆＃13;
＆＃13;
＆＃13;

相关问题
最新问题