Href領域も大きすぎます、インラインブロックを試しました

Question

私の問題は、href領域をイメージサイズにすることができないことです。私はまだ白いボーダーを上にして、左に、私のイメージの右に、私はディスプレイを試みました：インラインブロック、幸運なし。これは私の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>

EDIT：答えてくれてありがとう、私は、私は少し不明瞭なことができると思います：

私はギャラリーを作りました画面の解像度がhdか1024x768かにかかわらず、4つのimgを連続して表示します。それは反応的です。 div.galleryでimg幅を100％に設定しました（これは私がここに追加するのを忘れてしまいました）。私の問題は、イメージ上に設定するときに私はこのようなものがあるということです：white border caused by a href。

Answer 1

は

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

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

にイメージタグは、タグの終わりを必要としません変更してみてください。その内容は全く次元を持っていない場合は

Answer 2

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 3

このため、実際に簡単な修正があります。

だけで、あなたの画像に、設定され、あまりにもdivの周りにあなたのAをラップ：height="48px" width="100%" position: absolute;

最後に、100％にあなたのアンカーの幅を設定します。

質問がある場合はお知らせください。おかげ

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

Answer 4

はあなたの問題を解決するためのコードの下に使用することができます。

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>