不占用框中所有图像大小的图像的href链接。

Question

所以我做了一个菜单列表，每个菜单链接到另一个页面使用一张图片。

首先我写了CSS

    .gallery {
      margin: 5px;
      border: 1px solid #ffd700;
      float: left;
      width: 140px;
    }
    
    .gallery:hover {
      border: 1px solid #777;
    }
    
    .gallery img {
      width: 100%;
      height: auto;
    }
    
    .desc {
      padding: 15px;
      text-align: center;
    }

第二，我编写了HTML代码。锦江门

  <div class="gallery">
    <a target="_blank" href="hxxp://imnotputtingmyurlhere">
      <img src="hxxp://imnotputtingmyurlhere" alt="Demo Koi Gate Habanero" class="wp-image-262"/></img>
    </a>
  <div class="desc">Hot Hot Fruit</div>
  </div>
  </div>

  <div class="gallery">
  <a target="_blank" href="hxxp://imnotputtingmyurlhere">
      <img src="hxxp://imnotputtingmyurlhere" alt="Demo Koi Gate Habanero" class="wp-image-262"/></img>
  </a>
  <div class="desc">Wealth Inn</div>
  </div>
  </div>

  <div class="gallery">
    <a target="_blank" href="hxxp://imnotputtingmyurlhere">
      <img src="hxxp://imnotputtingmyurlhere" alt="Demo Slot Fa Cai Shen" class="wp-image-262"/></img>
  </a>
  <div class="desc">Fa Cai Shen</div>
  </div>
  </div>

  <div class="gallery">
  <a target="_blank" href="hxxp://imnotputtingmyurlhere">
      <img src="hxxp://imnotputtingmyurlhere" alt="Demo Slot Wild Trucks" class="wp-image-262"/></img>
  </a>
  <div class="desc">Wild Trucks</div>
  </div>
  </div>


  <div class="gallery">
  <a target="_blank" href="hxxp://imnotputtingmyurlhere">
      <img src="hxxp://imnotputtingmyurlhere" alt="Demo Slot Zeus" class="wp-image-262"/></img>
  </a>
  <div class="desc">Zeus</div>
  </div>
  </div>
  </div>

然而，结果是链接并没有占用整个图片所使用的全部空间。有人能帮帮我吗？

Answer 1

在鼠标对a是采取整个img，但当你检查它看起来更小。这是因为默认情况下，img标记是display: inline-block;，而a标记是display: inline;。

​

​

在a示例中，您必须放置display: block;，它将覆盖整个img标记。名为<div class="desc">Zeus</div>的Div不在a标记之外。

​

​

Answer 2

更改Html

​

.gallery {
  margin: 5px;
  border: 1px solid #ffd700;
  float: left;
  width: 140px;
}
.gallery:hover {
  border: 1px solid #777;
}
.gallery img {
  width: 100%;
  height: auto;
}
.desc {
  padding: 15px;
  text-align: center;
}

    <div class="gallery">
    <a target="_blank" href="https://thumbs.dreamstime.com/b/black-demo-icon-white-background-black-demo-icon-116555294.jpg">
      <img src="https://thumbs.dreamstime.com/b/black-demo-icon-white-background-black-demo-icon-116555294.jpg" alt="Demo Koi Gate Habanero" class="wp-image-262"/>
      <div class="desc">Hot Hot Fruit</div>
  </a>
  </div>
  <div class="gallery">
  <a target="_blank" href="https://thumbs.dreamstime.com/b/black-demo-icon-white-background-black-demo-icon-116555294.jpg">
      <img src="https://thumbs.dreamstime.com/b/black-demo-icon-white-background-black-demo-icon-116555294.jpg" alt="Demo Koi Gate Habanero" class="wp-image-262"/>
      <div class="desc">Wealth Inn</div>
  </a>
  </div>
  <div class="gallery">
    <a target="_blank" href="https://thumbs.dreamstime.com/b/black-demo-icon-white-background-black-demo-icon-116555294.jpg">
      <img src="https://thumbs.dreamstime.com/b/black-demo-icon-white-background-black-demo-icon-116555294.jpg" alt="Demo Slot Fa Cai Shen" class="wp-image-262"/>
     <div class="desc">Fa Cai Shen</div>
   </a>
  </div>
  <div class="gallery">
  <a target="_blank" href="https://thumbs.dreamstime.com/b/black-demo-icon-white-background-black-demo-icon-116555294.jpg">
      <img src="https://thumbs.dreamstime.com/b/black-demo-icon-white-background-black-demo-icon-116555294.jpg" alt="Demo Slot Wild Trucks" class="wp-image-262"/>
      <div class="desc">Wild Trucks</div>
   </a>
  </div>
  <div class="gallery">
  <a target="_blank" href="https://thumbs.dreamstime.com/b/black-demo-icon-white-background-black-demo-icon-116555294.jpg">
      <img src="https://thumbs.dreamstime.com/b/black-demo-icon-white-background-black-demo-icon-116555294.jpg" alt="Demo Slot Zeus" class="wp-image-262"/>
      <div class="desc">Zeus</div>
  </a>
  </div>

​