Question

我正试图将图像居中到某个div的确切中心。图像必须保持原始宽高比，但也必须能够增长和缩小，具体取决于浏览器的宽度和高度。

更确切地说：容器填满整个窗口，每侧有一个100px的填充。容器内部是一个图像，根据其纵横比，水平或垂直填充填充的div。最后，该图像必须位于所有图像的中心。

这是我的代码：

main {

}

main figure {
    display: flex;
    justify-content: center;
    margin: 0;
    padding: 100px;
    height: calc( 100vh - 200px );
}

main figure img {
    display: block;
    margin: auto;
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
}

<main>
    <figure>
        <img src="https://msdnshared.blob.core.windows.net/media/TNBlogsFS/prod.evol.blogs.technet.com/CommunityServer.Blogs.Components.WeblogFiles/00/00/01/03/07/uno.jpg" />
    </figure>
</main>

我希望它足够清楚。谢谢你的帮助！

Answer 1

考虑使用支持响应式网页设计的bootstrap框架。通过使用名为img-responsive的类，您将能够使图像响应浏览器的宽度和高度。

将引导程序JavaScript包含在HTML
将引导程序CSS包含在HTML
编写用于居中图像和填充的CSS
将img-responsive类添加到图像

以下是bootstrap响应式图像的示例 http://www.w3schools.com/bootstrap/tryit.asp?filename=trybs_ref_img-responsive&stacked=h

Answer 2

将您的包装元素设置为position:relative

将img元素设置为具有以下CSS：

img{
  position:absolute;
  top:50%;
  left:50%;
  transform:translate(-50%,-50%);
}

这应该将图像直接置于包装器的中心。

在CSS中居中可调整大小的图像

2 个答案: