0

画像のリストを作成するための単純な HTML セットがあります ( JSFiddle ):

<ul>
  <li>
    <img src="//cloudinary-a.akamaihd.net/forwardfour/image/upload/h_300,w_200,c_pad,e_vibrance:100/pgznasls8cnqg3vlla7t.jpg" />

    <div class="container">
      <h3 class="title">The Landscape of History</h3>
    </div>
  </li>
</ul>

ただし、添付の JSFiddle へのリンクを見ると、画像の下に約 5px の余分なスペースがあることがわかります。なぜこれを行っているのか、余分なスペースを削除するために何ができるのか分かりますか?

お時間をいただきありがとうございます。

4

2 に答える 2

1

スペースは画像の一部です。それを修正する唯一の方法は、それをトリミングすることです。

(まあ、 を使用することもできますclip: rect()。しかし、それはあまり良い方法ではありません。)

于 2013-07-10T01:29:26.623 に答える
0

画像の下端に沿って 5px (ish) の余白があります。背景を黒に変更する<body>と、それが表示されます。

ソースをトリミングするか、明示的な高さとオーバーフローのない背景画像として画像を使用する必要があります。

または、他の 3 つのエッジの周りに 5px の境界線を配置して、デザインの一部にすることもできます。:)

もちろん問題は、他のソース画像 (これがカタログ タイプのものである場合) には 5px の境界線がない可能性があることです。そのため、実際に最善の解決策は、可能であればソースを編集することです。

于 2013-07-10T01:31:01.977 に答える