Question

假设我的高度为400px，宽度为400px。

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

现在，如果我有一个高度为350，宽度为200像素的图像，我希望在此div中进行调整。我的意思是它调整div里面的div为div。它既不适合div也不适合。恰好适合中心。

类似div应该被视为100％，图像应该是它的比例。

应保留高度为50 px且宽度为200 px的剩余部分。像buttom和top一样留下25 25 px，左边和右边留下100 100 px。

此外，如果图像的宽度为800px，高度为700像素，则div的高度和宽度应视为100％，图像应位于中间而不进行任何拉伸

我不是前端开发人员:(

Answer 1

您可以使用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%);
}

Answer 2

因此，您希望图像在div内部以其原始大小居中，并且当图像大于任何维度中的div时，任何溢出都会被简单切割？

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

如果这不是一个选项，请绝对定位 - -50%来自“一边”（top，left，right和bottom），以及使用margin:auto将其置于中心位置：

＆＃13;

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; }

＆＃13;

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

＆＃13;

Answer 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;
}

编辑：如果图片高于容器，则添加修补程序。

Answer 4

尝试在图像上放置max-width和max-height：

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

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

Answer 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;
}

Answer 6

我会将图片设置为background的{{1}}，然后使用div更改图片的大小。

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

background-size: contain

Answer 7

div {
    text-align: center;
}

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

图像大小与div大小的比例没有任何拉伸

7 个答案: