无法将图像正确放入div中

I'm working with Angular and trying to bind an image to a div background. The background need to be darker from the original image so text can be include later :

我正在使用Angular并尝试将图像绑定到div背景。背景需要比原始图像更暗，以便以后可以包含文本：

The problem Is - The image does not show properly inside the boundaries of the div; some parts of the image are missing.

问题是 - 图像在div的边界内没有正确显示;图像的某些部分缺失。

.PictureCover {
  background-size: cover;
    margin: 10px;
  width: 70px;
  height: 100px;
  float: left;
  
}

<div class="PictureCover" style="background-image: 
    linear-gradient(
      rgba(0, 0, 0, 0.5),
      rgba(0, 0, 0, 0.5)
    ),
    url(http://a57.foxnews.com/global.fncstatic.com/static/managed/img/Entertainment/0/0/tom-cruise-playboy-interview-660.jpg);"></div>

The url to the image from the example is temporary and will be replaced with a binding to a image from object in angular so inculding 'background-image' inside the PictureCover css class is not an option.

示例中图像的url是临时的，将被替换为对角线对象的图像绑定，因此在PictureCover css类中包含'background-image'不是一个选项。

Thanks.

谢谢。

1 个解决方案

#1

In .PictureCover, you could add: background-position: center center;

在.PictureCover中，您可以添加：background-position：center center;

.PictureCover {
  background-size: cover;
    margin: 10px;
  width: 70px;
  height: 100px;
  float: left;
background-position: center center;
  
}

<div class="PictureCover" style="background-image: 
    linear-gradient(
      rgba(0, 0, 0, 0.5),
      rgba(0, 0, 0, 0.5)
    ),
    url(http://a57.foxnews.com/global.fncstatic.com/static/managed/img/Entertainment/0/0/tom-cruise-playboy-interview-660.jpg);"></div>