0

以下に例を示します: http://jsfiddle.net/7zhLm/5/

内部の画像は、div がサポートするサイズよりも大きいです。

したがって、残りをトリミングしています（overflow-x: hidden）。

画像の周りに白い境界線を作成しようとしていますが、うまくいかないようです。

開発ツールで何が起こっているのかを確認したところ、下部が白い境界線に重なっていることがわかりました。

どうすれば修正できますか？

4

3 に答える 3

2

と の両方overflow-xを使用しているようですoverflow-y。古いブラウザではサポートされていませんがoverflow:hidden;、どのブラウザでも動作-xするのでそのまま使用できます。-y

とにかく、それを避けるために、別の<div>. ライブ デモを確認してください。更新されたコードは次のとおりです。

<div id="fixed_event_1" class="splashTabLogout" >
<div>
<img src="http://www.twospy.com/galleriffic/demo/Sample%202.jpg" width="300" />
</div>
</div>

.splashTabLogout {
    width: 300px;
    height: 100px;
    cursor: pointer;
    background: #fff;
    padding: 10px;
    /* border-radius and box-shadow stuff */
}
.splashTabLogout > div {
    max-width:100%;
    max-height:100%;
    overflow:hidden;
}
于 2012-09-26T13:56:26.630 に答える
2

JSFiddle パディングで境界線を設定しようとしました。10px の白枠に変更します。

于 2012-09-26T13:56:37.720 に答える
0

あなたが持っているHTMLは問題ありません。これはセマンティックでシンプルです。変更しないでください。それについての詳細を変更し、CSS を修正すると、あなたは驚くでしょう: http://jsfiddle.net/7zhLm/9/

CSS

.splashTabLogout {
    border: white solid 10px;
    border-radius: 3px;
    box-shadow: rgba(0,0,0,.22) 0 2px 6px;
    overflow: hidden;
}

.splashTabLogout img { width:300px }

HTML

<div id="fixed_event_1" class="splashTabLogout" >
    <img src="your-pic.jpg" />
</div>

注:imgタグ内に幅/高さを含めることは有効です。限目。画像のギャラリーなど、同じサイズの画像が複数ある場合は、CSS ファイルから幅/高さを宣言する方が簡単で、コードも少なくて済みます。ご参考までに

于 2012-09-26T14:16:03.177 に答える