图像大小与 div 大小成比例，没有任何拉伸答案

【问题标题】：image size in ratio with div size without any stretch图像大小与 div 大小成比例，没有任何拉伸
【发布时间】：2015-03-21 06:14:41
【问题描述】：

假设我有一个高度为 400 像素、宽度为 400 像素的 div。

<div style="width:400px; height:400px; background:#CCC;" align="center">
<img src="/static/{{media_info.media_file}}" />
</div>

现在，如果我有一个高度为 350 和宽度为 200 像素的图像，我希望它在这个 div 中进行调整。我的意思是它在 div 内部调整为 div 的子级。它不应该适合 div 也不能拉伸。刚好适合中心。

like div 应该是100%，image 应该是它的比例。

剩余的高度为 50 像素，宽度为 200 像素。比如按钮和顶部留下 25 25 像素，左右留下 100 100 像素。

此外，如果图像的宽度为 800 像素，高度为 700 像素，则 div 的高度和宽度应被视为 100%，并且图像应位于中间而没有任何拉伸

我不是前端开发人员 :(

【问题讨论】：

标签： html css

【解决方案1】：

因此，您希望图像在 div 内以原始大小居中，并且当图像在任何维度上大于 div 时，任何溢出都会被简单地截断？

您可以将其设置为居中的背景图像，而不是在实际的img 元素中使用。

如果这不是一个选项，请将其绝对定位——-50% 从任一“侧”（top、left、right 和 bottom），并使用margin:auto 将其居中：

div { position:relative; width:400px; height:400px; margin:10px; background:#ccc;
  overflow:hidden; }
div img { position:absolute; top:-50%; left:-50%; right:-50%;
   bottom:-50%; margin:auto; }

<div id="div1"><img src="http://placehold.it/350x250/ff9999/000000"></div>
<div id="div2"><img src="http://placehold.it/800x700/ff9999/000000"></div>

【讨论】：

只是好奇，你为什么不直接提到 0 的值？ Fiddle
为什么这里有 2 张图片？
@Mr_Green：因为这不适用于超大图片的水平居中（至少在 Chrome 和 Opera 中，其他浏览器未勾选）
@aryan：“为什么这里有 2 张图片？”——因为我想演示两种情况——图片比 div 小，图片比 div 大……

【解决方案2】：

您可以使用 css 的 transform 属性实现此目的。

这里是fiddle

div {
    position: relative;
}
img {
    display: block;
    margin:0 auto;
    max-width: 100%;
    max-height: 100%;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

【讨论】：

你能把css写成内联吗
这个div也需要overflow:hidden，否则会出现过大的图片。
@aryan 是的，我可以。似乎您知道如何编写内联，因为您知道它被称为“内联”，并且基本的 googler 可以知道如何编写它。（这不是火箭科学）。顺便说一句，如果你有要求，我可能会考虑写它。我不想对你无礼，但请在这里表现出一点努力。干杯！！

【解决方案3】：

注意，我清理了内联样式，只是为了说明清楚。

http://jsfiddle.net/s4ja2q1z/4/

div {
    width: 400px;
    height: 400px;
    background: lime;
    text-align: center;
    position: relative;
}
img {
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
    position: absolute;
    margin: auto;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
}

编辑：如果图像高于容器，则添加修复。

【讨论】：

你能写 inline 吗？我需要它内联
@aryan 你也可以选择使用内联css

【解决方案4】：

尝试将最大宽度和最大高度放在图像上：

<img style="max-width: 100%;max-height: 100%;" src="/static/{{media_info.media_file}}" />

这将使图像尺寸限制在父容器的最大宽度和高度（在本例中为 400 像素），并且如果您更改父 div 的尺寸而不更改任何会导致拉伸的比率，它将按比例缩小。

【讨论】：

你的回答比我的好。 @aryan 只有一件事：请，请，请不要使用“对齐”属性。自 HTML 4.01 起已弃用。
抱歉，我编辑了我的评论。那是为@aryan 准备的。他正在使用它。
这不会按照 OP 的要求将图像垂直和水平居中。

【解决方案5】：

您也可以通过使用 table-cell 属性来做到这一点。

http://codepen.io/Edrees21/pen/XJoEmp

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

.container {
  width: 400px;
  height: 400px;
  text-align: center;
  background-color: #cccccc;
  vertical-align: middle;
  display: table-cell;
}

【讨论】：

这不适用于大于 div 的图像，例如问题中提到的 800×700。

【解决方案6】：

我会将图像设置为div 的background，然后使用background-size: contain 更改其大小。

这将使您的图像不会失真，但仍会填满整个 div。

<div style="width:400px; height:400px; background-image:url("image.jpeg"); background-repeat:no-repeat; background-size: contain; background-position: center;"> </div>

【讨论】：

【解决方案7】：

div {
    text-align: center;
}

img {
    max-width: 400px;
    max-height: 400px;
    vertical-align: middle;
}

【讨论】：