javascript - 我想将包含在 div 中的图像居中。当我设置 50% margin-top 时，它从 div 流出。我如何收容它？

Question

这只是我的代码片段。我似乎无法将图像锁定在 div 中，如果我设置 margin-top: 50% 它就会从 div 中流出。我该如何阻止它？我还想在包含它的 div 的死点设置图像。

var twitchArr = ["ESL_SC2", "OgamingSC2", "cretetion", "freecodecamp", "storbeck", "habathcx", "RobotCaleb", "noobs2ninjas"];

var dataArray;
twitchArr.forEach(function(twitch) {
      $.getJSON('https://api.twitch.tv/kraken/streams/' + twitch + '?client_id=lgiuraoc2wbg635m7ewteblxg38n4b', function(data) {
            console.log(data.stream); /*just for checking*/
            if (data.stream !== null) {
              forOnline(data.stream.channel.logo, data.stream.channel.game, data.stream.channel.status);

              function forOnline(img, gameName, description) {
                var para = '<div class="off">' +
                  '<img id="mainImg" src=' + img + '>' + '</div>';
                var para1 = '<div class="off1">' + '<p id="textovo">' + gameName + ": " + description + '</p>' + '</div>';

                $(".imgFirst").append(para);
                $(".textSecond").append(para1);
              }
            } else {

#mainImg {
  border-radius: 100%;
  border: 0 solid white;
  width: 60%;
  height: 80%;
  position: relative;
  margin-top: 40px;
}


/*adjusting the image only*/

.off,
.off1,
.off2,
.off3 {
  height: 6em;
  padding: 0 0 0 0;
  margin-top: 0em;
  margin-bottom: .3em;
}

.off {
  max-width: 99px;
  max-height: 83px;
}

<div class='container-fluid' id=onlyForOnline>
  <div class="row">
    <div class="col-xs-2 imgFirst removePadding">

    </div>

    <div class="col-xs-10 textSecond removePadding">

    </div>
  </div>
</div>

Answer 1

我不太确定你的问题，但我认为删除 margin-top 并添加 object-fit 和 object-position 可能解决您的问题。

试试下面的 CSS

.off{
   max-width: 99px;
   max-height: 83px;
   object-fit: contain;
   object-position: center;
}

从 #main-img 中移除 margin-top