0

私は自分の問題の解決策を探しています。

私はモバイル サイトに Twitter ブートストラップを使用しています。これがモバイル ビューでの結果です。

ここに画像の説明を入力

<div class="row">
    <div class="span4">
        <div class="visible-phone" style="background-image: url('http://upload.tapcrowd.com/upload/catalogimages/719/catalogimagecardealer@2x.png');></div>
        <p class="metadataTitle metacell">
        <span style="display: inline-block" class="ellipsis">Car Dealers</span>
        <span style="table-row"></span></p>
        </div>  
    </div>
</div>

私の画像が入っているdivのcss：

background-size:contain;
background-repeat: no-repeat;
background-position: center center;
width: 100%; 
height: 300px;"

しかし、ご覧のとおり、画像と下のコンテンツの間に余白があります。これを修正する方法を知っている人はいますか?

4

2 に答える 2

5

背景サイズ:含む;

https://developer.mozilla.org/en-US/docs/Web/CSS/background-size :

「contain: このキーワードは、背景画像の両方の寸法が背景配置領域の対応する寸法以下であることを保証しながら、背景画像をできるだけ大きくスケーリングする必要があることを指定します。」

したがって、画像は要素に完全に収まるようにスケーリングされています-cover代わりに使用したいようです:

「カバー: このキーワードは、背景イメージを可能な限り小さくスケーリングする必要があることを指定しますが、両方の寸法が背景配置領域の対応する寸法以上であることを確認します。」

于 2013-05-31T08:19:51.417 に答える
1

margin:0; padding:0;以下の画像とコンテンツの両方に設定します。これにより、マージンが削除されます。HTML はデフォルトでマージンを追加するため、マージンを削除するよう HTML に明示的に指示する必要があります。

于 2013-05-31T08:14:27.287 に答える