如何在ASP.NET中居中图像

Question

目前我的地图项目中保存了一张图片，我希望将其添加到我的解决方案中，这是我的第一个网站。我是ASP.NET和CSS的新手，但有一些HTML经验。我无法确定如何适当地居中和拉伸图像，这样无论浏览器窗口的大小如何，地图的中心始终保持居中。

请指教！

<section>
    <div class="container-fluid">
        <div class="row">
            <img src="/img/additional/map.png"/>
        </div>            
    </div>
</section>

the built-in RegexTransformer

编辑1：

我在找到了以下信息

响应式图片

通过添加.img响应类，可以使Bootstrap 3中的图像响应友好。这适用于max-width：100％;，height：auto;和显示：块;到图像，以便它很好地缩放到父元素。

要使用.img响应类的图像居中，请使用.center-block而不是.text-center。有关.center-block用法的更多详细信息，请参阅帮助程序类部分。

SVG图像和IE 8-10

在Internet Explorer 8-10中，具有.img响应的SVG图像的大小不成比例。要解决此问题，请添加宽度：100％\ 9;在必要时。 Bootstrap不会自动应用此功能，因为它会导致其他图像格式的复杂化。

<img src="..." class="img-responsive" alt="Responsive image">

Answer 1

添加班级中心区块 参考：here

Answer 2

只需将中心标记添加到图像中即可。

<section>
   <div class="container-fluid">
      <div class="row">
         <center>
            <img src="/img/additional/map.png"/>
         </center>
      </div>            
  </div>
</section>

Answer 3

根据http://getbootstrap.com/css/#images添加了class="img-responsive center-block"。

<section>
    <div class="row">
        <img class="img-responsive center-block" src="/img/additional/map.png"/>
    </div>
</section>

Answer 4

在Bootstrap 4中：

class BaseClass {
  constructor(vector1) {
    this.vector1 = vector1;
  }
}

class MyClass extends BaseClass {
  constructor(vector1, vector2) {
    super(vector1);
    this.vector2 = vector2;
  }
}

Answer 5

如果您正在使用引导程序，则可以执行以下操作：

<div class="text-center">
  <img src="..." class="rounded" alt="...">
</div>

Answer 6

您也可以使用纯CSS，例如：

。

center {
  display: block;
  margin-left: auto;
  margin-right: auto;
  width: 50%;
}