将自适应大小的图像水平和垂直居中

Question

将自适应大小的图像水平和垂直居中

3

我做了很多搜索，并找到了许多关于这个问题的答案，但当我在我的特定设置中尝试它们时，似乎没有一个能够解决我的问题。这里是我试图解决的问题的JSFiddle：

.classA {
    background-color: yellow;
    width: 50px;
    height: 50px;
    float: left;
}
.classB {
    width: auto;
    height: auto;
    max-width: 50px;
    max-height: 50px;
}

<div class="classA">
    <img class="classB" src="https://www.google.com/logos/doodles/2015/ida-b-wells-153rd-birthday-4853060954226688-hp.jpg"></img>
</div>

我正在尝试获取图像，并自动调整大小以适应所包含的div，使其在div中水平和垂直居中。我不能将图像设置为div的背景。

我已经尝试过各种类型的显示（内联，内联块）的自动边距。我尝试了text-align属性以及vertical-align属性。我也尝试了center标签。但是我尝试的所有方法都没有奏效。

解决方案应该使图像在水平和垂直方向上都居中。

- David

6个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Stickers · Answer 1

你可以使用内联块 + 伪元素技巧。

.classA {
    background-color: yellow;
    width: 50px;
    height: 50px;
    float: left;
    text-align: center;
    font-size: 0;
}
.classA:after {
    content: "";
    height: 100%;
    display: inline-block;
    vertical-align: middle;
}
.classB {
    width: auto;
    height: auto;
    max-width: 100%;
    max-height: 100%;
    display: inline-block;
    vertical-align: middle;
}

<div class="classA">
    <img class="classB" src="https://www.google.com/logos/doodles/2015/ida-b-wells-153rd-birthday-4853060954226688-hp.jpg">
</div>

请注意，此解决方案仅适用于图像是容器中唯一的子元素，并且容器具有已知高度设置的情况。

顺便提一下，<img> 是自闭合标签，<img></img> 是错误的语法，请使用 <img src=""> 或 <img src="" />。

- COBOLdinosaur · Answer 2

你说过尝试了块级元素和内联块级元素；那你试过将包含 div 元素的 display 属性设置为 table-cell 吗？通常这会给你所需的对齐效果。

- alynioke · Answer 3

这里是代码，你只需要四行（不包括css供应商前缀）：

text-align: center; 父元素的属性可以实现水平居中
position: relative; top: 50%; transform: translateY(-50%); 可以实现图片的垂直居中

我添加了两个不同大小但其他属性相同的块，让你看到它是通用的。在最新的Chrome、Safari、IE10和Opera中进行了测试，效果一致。

.classA {
    background-color: yellow;
    width: 300px;
    height: 50px;
    float: left;
    
    text-align: center;
}

.classB {
    width: auto;
    height: auto;
    max-width: 300px;
    max-height: 50px;
       
    position: relative;
    top: 50%;
    -webkit-transform: translateY(-50%);
        -ms-transform: translateY(-50%);
            transform: translateY(-50%);
}

.classA2 {
    background-color: yellow;
    width: 100px;
    height: 70px;
    float: left;
    
    text-align: center;
}

.classB2 {
    width: auto;
    height: auto;
    max-width: 100px;
    max-height: 70px;
       
    position: relative;
    top: 50%;
    -webkit-transform: translateY(-50%);
        -ms-transform: translateY(-50%);
            transform: translateY(-50%);
}

.separator {
    display: block;
    clear:both;
    padding:20px;
}

<div class="classA">
    <img class="classB" src="https://www.google.com/logos/doodles/2015/ida-b-wells-153rd-birthday-4853060954226688-hp.jpg"></img>
</div>
<div class="separator"></div>
<div class="classA2">
    <img class="classB2" src="https://www.google.com/logos/doodles/2015/ida-b-wells-153rd-birthday-4853060954226688-hp.jpg"></img>
</div>

希望这可以帮助你 :)

- Arshid KV · Answer 4

0

请将CSS添加如下：

.classB {
    Margin:auto;
    max-width: 50px;
    max-height: 50px;
}

- Arshid KV

这个不起作用。我在上面提供的JSFiddle中尝试过了。 - David

在CSS中添加 position:relative。 - Arshid KV

那还是不行。你知道在发布之前可以在JSFiddle上测试吗？ - David

- CookieMonster · Answer 5

如果你需要垂直和水平居中，那么这就是你所需要的。

http://jsfiddle.net/M_Elf/38kgyzwu/2/

一般来说

    margin:0 auto;

正在创造奇迹

或者：如果您只需要水平居中，请使用

margin-left:auto;
margin-right:auto;

在你的主包装器上

- Lansana Camara · Answer 6

将你的CSS更改为以下内容：

.classA {
    background-color: yellow;
    width: 50px;
    height: 50px;
    padding: 5px;
}

.classB {
    display: block; margin: auto;
    object-fit: cover;
    max-width: 100%;
    height: 100%;
}

CSS中的object-fit: cover可以帮助图片适应大小而不失去质量。

JSFiddle

在这里阅读更多关于object-fit的信息：object-fit - MDN文档