Href 区域也很大，尝试过 inline-block

Question

所以我的问题是，我无法将 href 区域设置为图像大小。我仍然在图像的左侧，右侧出现白色边框，我尝试了 display: inline-block，但没有任何运气。这是我的 CSS（我知道它看起来很糟糕）：

div.gallery {
  margin: 1%;
  -webkit-box-shadow: 10px 10px 25px #000;
  -moz-box-shadow: 10px 10px 25px #000;
  box-shadow: 10px 10px 25px #000;
  float: left;
  min-width: 180px;
  width: 23%;
}

div.gallery a {
  background-color: red;
  display: inline-block !important;
}

div.gallery img {
  display: block;
}

div.desc {
  padding: 15px;
  text-align: center;
}

<div class="gallery">
  <a href="myphoto.jpg">
    <img src="http://dummyimage.com/200x150&text=myphoto.jpg" alt="" />
  </a>
  <div class="desc">XXX</div>
</div>


<div class="gallery">
  <a target="_blank" href="myphoto.jpg">
    <img src="http://dummyimage.com/200x150&text=myphoto.jpg" alt="" />
  </a>
  <div class="desc">XXX</div>
</div>

编辑：感谢您的回答，但我想我可能有点不清楚：

我制作了一个画廊，可以连续显示 4 张图片，无论屏幕分辨率是高清还是 1024x768。它反应灵敏。在 div.gallery img 中，我将宽度设置为 100%（我忘了在这里添加）。我的问题是，在图像上设置时我有这样的东西：white border caused by a href。

Answer 1

如果其内容没有维度，a inline-block 元素将不会展开。一旦我将维度设置为img，它就会起作用。

img {
  width:180px;
  height:100px;
}

div.gallery {
margin: 1%; 
-webkit-box-shadow: 10px 10px 25px #000;
-moz-box-shadow: 10px 10px 25px #000; 

 box-shadow: 10px 10px 25px #000; 
 float: left;
 min-width: 180px;
 width: 23%;
 }

 div.gallery a {
 background-color: red;
 display: inline-block;
 }


 div.gallery img {
 display:inline-block;
 }

 div.desc {

 padding: 15px;
 text-align: center;
 }

 <div class="gallery">
 <a href="myphoto.jpg">
 <img src="myphoto.jpg" alt="" />
 </a>
 <div class="desc">XXX</div>
 </div>


 <div class="gallery">
 <a target="_blank" href="myphoto.jpg">
 <img src="myphoto.jpg" alt="" />
 </a>
 <div class="desc">XXX</div>
</div>

Answer 2

您可以使用以下代码来解决您的问题。

div.gallery {
margin: 1%; 
-webkit-box-shadow: 5px 5px 15px #000;
-moz-box-shadow: 5px 5px 15px #000; 
 box-shadow: 5px 5px 15px #000; 
 float: left;
 min-width: 160px;
 width: 25%;
 }

 div.gallery a{
 width: 100%;
 background-color: yellow;
 display: inline-block !important;
 }

 div.gallery img {
 display:block;
 position: absolute;
 }

 div.desc {
 padding: 20px;
 text-align: center;
 }

 <div class="gallery">
 <a href="myphoto.jpg">
 <img src="myphoto.jpg" alt="" height="100px" width="100%" />
 <div class="desc">AAA</div>
 </a>
 </div>

 <div class="gallery">
 <a target="_blank" href="myphoto.jpg">
 <img src="myphoto.jpg" alt="" height="100px" width="100%" />
 <div class="desc">BBB</div>
 </a>
</div>

Answer 3

有一个非常简单的解决方法。

也只需将 a 包裹在 div 周围，然后在图像上设置：height="48px" width="100%" position: absolute;

最后，将锚点的宽度设置为 100%；

如果您有任何问题，请告诉我。谢谢

https://jsfiddle.net/v45k8ojk/2/

Answer 4

尝试改变

<img src="myphoto.jpg" alt="" />

到

<img src="myphoto.jpg" alt="image1">

图像标签不需要标签的结尾。