Question

我正在使用Bootstrap。我有4列，每列包含一个大图像。我怎样才能只显示图像的中心并重新调整尺寸？

以下是我目前所拥有的内容：http://catsarecrits.com/

CSS：

.item {
    overflow: hidden;
}

HTML：

<body>
    <div class="row">
        <div class="col-md-3 item" id="steam"><img src="assets/img/steam.jpg"></div>
        <div class="col-md-3 item" id="twitter"><img src="assets/img/twitter.png"></div>
        <div class="col-md-3 item" id="gplus"><img src="assets/img/g+.jpeg"></div>
        <div class="col-md-3 item" id="contact"><img src="assets/img/contact.png"></div>
    </div>
</body>

如果我没有很好地描述它，我找到了我想要的例子：http://www.beastsmc.com/ 如果您查看每个服务器的背景图像，它很大，但它们只显示中心。

我尝试过使用img-responsive和center-block类，但它们没有用。

非常感谢！

Answer 1

他们像其他人一样使用它

img{background-position:50%}

他们的确切代码：

.index > a#creativeLink span.image {
    background-image: url('../i/creative.jpg');
}

在你的情况下，它将翻译成这样的东西：

#steam{background:url(assets/img/steam.jpg) no-repeat 50%; background-size:cover}

Answer 2

<center> your code <center/>

Answer 3

<!--Do try this
(set this class to you image)-->

.img-align {
    margin: 50% 0;
    width: 100%;
}

如何将图像居中以便仅显示图像的中间？

3 个答案: