Question

这只是我的代码片段。我似乎无法将图像锁定在div中，如果我设置一个margin-top：50％它只是流出div。我怎么阻止它？另外，我想将图像设置在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;
}

从margin-top

中删除#main-img

Answer 2

这是因为你的图像大于div高度的50％。
使用Calc：margin: calc((100% / 2) - 10px);其中10px是图片宽度的一半。

div{
  display: block;
  width: 200px; //For testing
  height: 200px; //For testing
  background-color:grey; //For testing
}

#mainImg {
    margin: calc((100% / 2) - 10px);
    width: 20px; //For testing
    height: 20px; //For testing
}

<div>
     <img src="http://doesnotexist.com/img" id="mainImg">
</div>

Answer 3

我之前使用过css类。请参考它。

.valign-middle {position: relative; float: left; display: inline-block; width: 100%; text-align: center; top: 50%; left: 50%; transform: translate(-50%, -50%);}

我想将我的图像放在div中。当我设置50％的margin-top时，它正在流出div。我怎么包含它？

3 个答案: