Question

所以我的问题是，我无法使href区域的图像大小。我仍然得到白色边框，左边，右边的图像，我试着显示：内联块，没有任何运气。这是我的CSS（我知道它看起来非常糟糕）：

＆＃13;

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

＆＃13;

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

＆＃13;

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

我创建了一个画廊，无论屏幕分辨率是高清还是1024x768，它都会连续显示4个img。它的反应灵敏。在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上包围你，然后设置你的图片：height="48px" width="100%" position: absolute;

最后，将锚点的宽度设置为100％;

如果您有任何疑问，请与我们联系。感谢

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

Answer 3

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

＆＃13;

$eval

＆＃13;

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

＆＃13;

Answer 4

尝试更改

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

到

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

图片代码不需要标记的结尾。

Href区域也很大，尝试了内嵌块

4 个答案: