当外部组件未知时，使左右边距相等

Question

我想以下方图像显示：

我有以下样式项：

var itemStyle = {
  display: 'block',
  width: this.computeWidth(),
  height: '250px',
  backgroundImage: 'url(' + imageLocation + ')',
  backgroundPosition: 'center !important',
  backgroundSize: 'cover',
  boxShadow: '10px 10px 5px #888888',
  borderRadius: '15px',
  marginLeft: 'auto !important',
  marginRight: 'auto !important'
};

我显示如下：

<div style={itemStyle}>
</div>

this.computeWidth()是这种方法，我根据页面调整图像的宽度：

  computeWidth: function() {
    console.log("this.state.window.width: " + this.state.window.width);
    if(this.state.window.width > 350) {
      return '250px';
    }
    return Math.floor(0.7 * this.state.window.width).toString() + 'px';
  },

我还尝试使用此方法计算marginLeft和marginRight：

  computeMargin: function() {
      if(this.state.window.width > 350) {
        return 'margin-auto';
      }
      return Math.floor(0.15 * this.state.window.width).toString() + 'px';
  },

但是，图像没有再次居中。

那么如何确保图像是页面的核心？（最好不要更改包含它的组件的css）

Answer 1

margin: Xpx auto有什么问题？它应该工作，因为图像定义宽度。或者，您可以向父级添加flexbox属性以使子级居中：

.parent {
  display: inline-flex;
  justify-content: center;
  width: 100%;
}

Answer 2

CSS应该足以解决这个问题。将图像包裹在div中，并使用margin属性居中。

<div class="img-wrap">
     <img src="foo.jpg">
</div>

的

.img-wrap { margin: 0 auto; }

请参阅此处了解更多详情：CSS-Tricks centering guide

---

<强> 修改   - 对于居中的背景图像，将以下CSS应用于div：

background-image: url("foo.jpg");
background-position: 50% 50%;
background-repeat: no-repeat;
background-size: contain;    /* Full image in div, no cropping, preserve aspect ratio */

通过沿div中的两个轴（x和y）移动图像的中心，使图像居中。因此，完美的居中。

<小时/>

或者，将此用于英雄形象：

background-size: cover;      /* Fill div (even if img is cropped), preserve aspect ratio */

有关背景居中的更多内容：Sitepoint: background-position property