Question

我无法弄清楚如何制作响应式图像，同时使图像居中，无论是在手机上还是在具有更宽分辨率的计算机上观看。

我正在使用css类.img-responsive，但总是将图像左对齐。我检查了该类设置的字段，但无法找到如何组合不同的样式，以便图像响应并同时居中。

这是一个简单的图片，包含在div或article指定的row-fluid类中。

Answer 1

<img src="http://lorempixel.com/600/450/" class="ri" />

img.ri
{
    position: absolute;
    max-width: 80%;
    top: 10%;
    left: 10%;
    border-radius: 3px;
    box-shadow: 0 3px 6px rgba(0,0,0,0.9);
}

img.ri:empty
{
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    -moz-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    -o-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
}

@media screen and (orientation: portrait) {
  img.ri {
      max-width: 90%;
  }
}

@media screen and (orientation: landscape) {
  img.ri {
      max-height: 90%;
  }
}

您可以使用@media和其他格式设置属性。

Here是一个教程。

或者您也可以尝试：

img { 
     max-width:100%; max-height:100%; margin:auto; 
}

Answer 2

试试这个。将margin-left和margin-right应用于auto将解决您的问题。

<style>
.center
{
margin-left:auto;
margin-right:auto;
}
</style>

<div class="col-md-3 col-sm-3 col-xs-3">
<img class="img-responsive center"/>
</div>

Answer 3

这个 CSS 会这样做：

.img-responsive {
    position: relative;
    left: 50%;
    transform: translate(-50%, 0);
    -ms-transform: translate(-50%, 0);
    -webkit-transform: translate(-50%, 0);
}

注意：在IE中它仅适用于9 +

Answer 4

我不会使用position: absolute，因为它会从布局上下文中移除它，这意味着它很可能不会在您希望的位置。相反，试试这个：

<强> HTML

<div class="centered-image-container">
    <img class="centered-image" src="">
</div>

<强> CSS

.centered-image-container {
    text-align: center;
}
.centered-image {
    width: auto;
    max-width: 100%;
}

这是一个带有示例的代码集：http://codepen.io/anon/pen/eHfrd

Answer 5

试试这个。

.product .img-responsive {
    margin: 0 auto;
}

Answer 6

以这种方式（Fiddle）图像水平和垂直居中并且响应

img {
    max-width:100%;
    height:auto;
    width: auto;
    margin: auto;
    position: absolute;
    top: 0; left: 0; bottom: 0; right: 0;
}

如何将响应式图像居中

6 个答案: