10

我的页面有一个图像空间，例如最大 100x100 图像。用户可以上传任何图像尺寸，Web 应用程序会在保持纵横比的情况下将其调整为 100x100。因此，可以将图像大小调整为 75x100 或 100x75 等。

无论调整大小的图像尺寸如何，我都希望它在网页上分配的空间中垂直和水平居中显示。我如何在 CSS 中做到这一点？我需要一个包含的 div，像这样：

<div class="image_container">
     <image src="http://placehold.it/100x100/" height="100" width="100" alt=""/>
</div>

无论如何，示例 CSS 会有所帮助。谢谢！

4

7 回答 7

25

试试这个 - http://jsfiddle.net/zYx4g/ 这将适用于任何大小的图像和所有浏览器。

.image_container {
    width: 300px;
    height: 300px;
    background: #eee;
    text-align: center;
    line-height: 300px;
}

.image_container img {
    vertical-align: middle;
}
​
于 2012-04-29T10:28:07.367 回答
14

我知道这是一个老问题，但现在你可以使用 flex

<div class="container">
    <img  src="http://placehold.it/200x200" />
</div>

CSS

.container {
    display: flex;
    justify-content: center;
    align-items: center;
    border: 1px solid;
    width: 50vw;
    height: 50vw;
}
.container img
{
    max-width:100%;
    max-height:100%;
}

小提琴演示

您还可以自定义容器的大小，某些浏览器可能不支持 flex，您可以在此处查看caniuse

于 2016-03-17T14:24:51.250 回答
3

将图像的左上角移动到中间并将其重置为图像宽度和高度的一半：

.image_container img{
    position: relative;
    top: 50%;
    left: 50%;
    margin-top: -50px;
    margin-left: -50px;
}
于 2012-04-29T10:21:56.840 回答
2 
<div class="blog-thumbnail">                
    <img src="img.jpg" alt="img">
</div>

.blog-thumbnail {
    height: 200px;
    margin: 0 auto;
    position: relative;
}
.blog-thumbnail img {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    top: 0;
    margin: auto;
    max-width: 100%;
    max-height: 100%;
}
于 2019-05-03T09:39:25.873 回答
1

你可以试试这个：

.image_container {
    display:table-cell;
    overflow:hidden;
    text-align:center;
    vertical-align:middle;
}
.image_container img {
    vertical-align:baseline;
}

不是 100% 确定浏览器兼容性，但应该让您朝着正确的方向开始。示例：http: //jsfiddle.net/fJtwX/1/

于 2012-04-29T10:27:28.710 回答
1

编辑：Zoltan Toth 回答得很好。

Jamie 的回答有效，如果您想要旧的浏览器兼容性，然后使用表格？

我知道我可能会抱怨，但是在需要的地方使用桌子并没有错！

http://jsfiddle.net/Yhq5h/11/

将您的容器设置为所需的大小，我需要查看该页面，但这应该适用于所有浏览器。

于 2012-04-29T10:39:28.017 回答
1

如果有人仍然需要这个，这里有一种使用显示表的方法；

.thumbnail { width:150px; height:150px; display: table; }

.thumbnail img { max-width:150px; max-height:150px; }

.thumbnailcontainer { display:table-cell; vertical-align: middle; text-align:center;}
<article class="thumbnail">    
  <div class="thumbnailcontainer">
         <img id="Img1" src="http://img.youtube.com/vi/QAOMIH7cgh0/0.jpg" />   
   </div>
</article>

于 2017-05-18T11:50:29.340 回答