调整大小以适合 div 中的图像，并水平和垂直居中

Posted 2023-03-06

【中文标题】调整大小以适合 div 中的图像，并水平和垂直居中

【英文标题】：Resize to fit image in div, and center horizontally and vertically

【发布时间】：2013-06-23 14:56:42

【问题描述】：

我在 div 中有一张图片。我希望图像调整大小以适合 div，并水平和垂直居中。我想要一个适用于 ie >= 8 的解决方案。

【参考方案1】：

这是一种方法：

在这里提琴：http://jsfiddle.net/4Mvan/1/

HTML：

<div class='container'>
    <a href='#'>
    <img class='resize_fit_center'
      src='http://i.imgur.com/H9lpVkZ.jpg' />
    </a>
</div>

CSS：

.container 
    margin: 10px;
    width: 115px;
    height: 115px;
    line-height: 115px;
    text-align: center;
    border: 1px solid red;

.resize_fit_center 
    max-width:100%;
    max-height:100%;
    vertical-align: middle;

【讨论】：

为什么图片周围有<a>？除了使图像成为链接之外，还有其他原因吗？ （这不是问题的一部分。）

@Jens 您可以跳过<a> 和</a>，它仍然可以工作。 （这确实不是问题的一部分，只是为了表明您可以将图像设置为链接并且不会中断）

你问了这个问题，然后马上就回答了……为什么？

@Saty 我正要回答另一个关于在 div 中居中图像的问题，但是因为我的要求有点不同（调整为 git + center Horizo​​ntal + center vertical），我决定它是值得在发布我的答案之前创建一个新问题。 Answering your own questions is encouraged.

很遗憾，这个解决方案没有放大图片：jsfiddle.net/4Mvan/438

【参考方案2】：

仅在 Chrome 44 中测试。

示例：http://codepen.io/hugovk/pen/OVqBoq

html：

<div>
<img src="http://lorempixel.com/1600/900/">
</div>

CSS：

<style type="text/css">
img 
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translateX(-50%) translateY(-50%);
    max-width: 100%;
    max-height: 100%;

</style>

【讨论】：

非常感谢，它有效。一个补充是你应该为 div 设置样式position: relative。

我检查了@hugo 的解决方案并最终采用了类似的方法，它非常适合我的需求，也适用于 IE。我的解决方案：codepen.io/anon/pen/RLPVaq

是的，x 轴和 y 轴的平移很重要。如果您的图像太大，您可以随时更改最大值。

【参考方案3】：

IE 不支持

更多信息在这里：Can I Use?

.container 
  overflow: hidden;
  width: 100px;
  height: 100px;


.container img 
  object-fit: cover;
  width: 100%;
  min-height: 100%;

<div class='container'>
    <img src='http://i.imgur.com/H9lpVkZ.jpg' />
</div>

【参考方案4】：

解决方案

<style>
.container 
    margin: 10px;
    width: 115px;
    height: 115px;
    line-height: 115px;
    text-align: center;
    border: 1px solid red;
    background-image: url("http://i.imgur.com/H9lpVkZ.jpg");
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;



</style>

<div class='container'>
</div>

<div class='container' style='width:50px;height:100px;line-height:100px'>
</div>

<div class='container' style='width:140px;height:70px;line-height:70px'>
</div>