イメージの周りの空白を削除する - CSS

Question

odooデータベースからイメージを取得してdivバックグラウンドに表示しようとしていますが、イメージの周囲に空白があるため、この空白を削除してdiv背景イメージを適用する必要があります、

Mycode：

<div t-attf-style="text-align:center;background:url('/web/image/event.event.ticket/#{doc.event_ticket_id.id}/image_medium') no-repeat; 
       font-size:#{doc.event_ticket_id.font_size}px;width:50%;height:900px;float:left;background-size:500px 900px;display:table;"> 
        <span style="vertical-align:middle;text-align:center;display:table-cell;" t-esc="doc.name"></span> 

       </div> 

どのようにCSSを使用した画像の周りに白いスペースを削除するには？

Answer 1

たぶん、これらのコードののいずれかを試してみてください。

img{vertical-align:bottom} 

または

img { vertical-align: top; } 

または

html, body { 
    margin: 0; 
    padding: 0; 
} 

はそれが助け願っています。

Answer 2

あなたはこの

.main{ 
 
text-align:center; 
 
background:url('https://i.stack.imgur.com/hQPzy.png') no-repeat; 
 
font-size:12px; 
 
width:50%; 
 
height:900px; 
 
float:left; 
 
background-size:500px 900px; 
 
display:table; 
 
background-position:-50px -35px; 
 
}

<div class="main"> 
 
    <span style="vertical-align:middle;text-align:center;display:table-cell;"> Content</span> 
 

 
       </div>

ような何かを試すことができますしかし、あなたは、画像のホワイトスペースの大きさを知っている必要があります。次に、あなたはポジションを取ることができます。

Answer 3

私は何かを試しました。それがあなたのためにうまく動作することを確認してください。ここでは、背景の位置と背景のサイズを設定しようとしました。休憩はすべてdivの幅と高さのように変わります。

.back{ 
 
    background: url('https://i.stack.imgur.com/hQPzy.png'); 
 
    height: 200px; 
 
    width: 200px; 
 
    background-size: 130% 150%; 
 
    border: 1px solid black; 
 
    background-position: 42% 15%; 
 
}

<div class="back"></div>