删除图像周围的空白区域 - CSS

Question

我正在尝试从odoo数据库中获取图像以将图像显示为div背景，但我的图像周围有空白区域，因此我需要删除此空白区域以应用div背景图像，

我的代码：

<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>