gpt4 book ai didi

html - 我怎样才能使图像居中以便它只显示它的中间?

转载 作者:行者123 更新时间:2023-11-28 09:37:29 25 4
gpt4 key购买 nike

我正在使用 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 类,但它们没有用。

非常感谢!

最佳答案

他们像其他人一样使用它

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}

关于html - 我怎样才能使图像居中以便它只显示它的中间?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/25478373/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com