匹配孩子的宽度不起作用

Question

我有一个链接（a元素），里面有一个图像（img元素）。我正在尝试使父元素（a元素）的宽度与其子元素的宽度相同，宽度为75％。

我建立了display: inline-block的链接，就像this answer所说的那样，但它没有用。父元素仍然大于其子元素。我做错了什么，我该如何解决？

JSFiddle

#img-link {
  display: inline-block;
  background-color: lightblue;
}
#img {
  width: 75%;
}

<a href="#" id="img-link">
  <img src="http://i.imgur.com/VROQLTe.jpg" id="img">
</a>

Answer 1

您需要为a设置75％，为img

设置100％

＆＃13;

＆＃13;

#img-link {
  display: inline-block;
  background-color: lightblue;
  width: 75%;
}
#img {
  width: 100%;
}

＆＃13;

<a href="#" id="img-link">
  <img src="http://i.imgur.com/VROQLTe.jpg" id="img">
</a>

＆＃13;

＆＃13;

＆＃13;

Answer 2

从display: inline-block;规则中删除#img-link。

否则图像将是a块的75％。

Answer 3

试试这个：

#img-link {
    display: inline-block;
    background-color: lightblue;
}

#img {
    width: 100%;
}

DEMO HERE

Answer 4

在链接上设置宽度100％和75％

#img-link {
  display: inline-block;
  background-color: lightblue;
  width: 75%;
}
#img {
  width: 100%;
}

Answer 5

可以有多种解决方案：

1. 第一个是从包装图像的锚中删除display: inline-block; css。然后，它将根据图像的大小调整大小。
＆＃13;
＆＃13;
#img-link {
  /*display: inline-block;*/
  background-color: lightblue;
}
#img {
  width: 75%;
}
＆＃13;
<a href="#" id="img-link">
  <img src="http://i.imgur.com/VROQLTe.jpg" id="img">
</a>
＆＃13;
＆＃13;
＆＃13;
1. 将图片的width从75％更改为100％
   ＆＃13;

   ＆＃13;

   #img-link {
     display: inline-block;
     background-color: lightblue;
   }
   #img {
     width: 100%;
   }

   ＆＃13;

   <a href="#" id="img-link">
     <img src="http://i.imgur.com/VROQLTe.jpg" id="img">
   </a>

   ＆＃13;

   ＆＃13;
   ＆＃13;