以强制大小居中图像而不拉伸答案

【问题标题】：Center image with forced size without stretching以强制大小居中图像而不拉伸
【发布时间】：2012-02-02 09:14:21
【问题描述】：

在周围的 div 中，我想将图像居中。此图像应具有强制大小但没有拉伸。所以如果 div 容器是 100px*100px，图片是 200px*200px，每边应该裁剪 50px。

在this question 中，您可以阅读如何强制调整大小。但我不希望图像从左下角开始，而是将其居中。这是问题:)

是这样的：

这就是我想要的样子：

【问题讨论】：

标签： html css image center image-size

【解决方案1】：

给图像一个负的左边距。在此示例中，margin-left:-50px。

编辑：或者如果你不知道图片的宽度，你可以将图片作为div的背景。

<div style="margin:0 auto; width:100px; height:100px; border:2px solid black;
  background:url(yourimagehere) 50% 0 no-repeat">
</div>

【讨论】：

如果我设置边距，我必须知道图像的宽度。这是我没有的，每张图片都有单独的尺寸。并且必须为每张图片计算边距值。
嗯。你不能用图片作为div的背景吗？使用 CSS，您可以将背景放置在 div 中任何您想要的位置。等等，我会编辑我的答案。
哦，是我的错。你的答案现在似乎是完美的。但这对我不起作用——这只是因为我没有给你所有信息。你的回答非常适合这个问题。但是我忘了说图像也在 HTML 中调整了大小：当实际宽度为 200 时，我将其包含在 HTML 中，并使用
但是...如果您在 img 标签中使用 width="100" 调整它的大小，那么您知道屏幕宽度（以像素为单位）是多少，因此您可以使用我的第一个解决方案！还是我又错过了什么？
啊，那很简单。如果要计算（宽度和高度中的较小者），这在 CSS 中是不可能的。你有它。因此，您需要一些 Javascript 来进行计算，如果您仍然使用 javascript，您还可以找出以像素为单位的屏幕宽度并相应地设置边距。或者，或者，在发送之前在服务器端调整图像大小，然后使用背景解决方案。

【解决方案2】：

This 可能是您需要的？

【讨论】：

这个属性真的很有趣，谢谢！但我需要知道图像的大小，对吗？
@MarcoW。尝试使用 %，如 this 示例

【解决方案3】：

即使容器的方向与图像的方向（纵向/横向）不匹配，这也有效。 zoom(0.1) 和 min-width/height:1000% 意味着如果图像大小达到目标容器的 10 倍，它就可以工作，我想你必须在某处画一条线：（http://jsfiddle.net/FYnCG/）。动画位只是一个测试，如果你愿意的话，你会看到当高度成为限制因素时它是如何缩放的。

<DOCTYPE html>
<html>
<head>
<style>
.container {
  width: 100px;
  height: 30px;
  border: 1px solid black;
  overflow:hidden;
  position:relative;
  transititon: width 5s, height 8s;
}
.container img {
  position: absolute;
  left:-10000%; right: -10000%; 
  top: -10000%; bottom: -10000%;
  margin: auto auto;
  min-width: 1000%;
  min-height: 1000%;
  -webkit-transform:scale(0.1);
  transform: scale(0.1);
}
.container:hover {
  width: 800px;
  height: 800px;
  transition: width 5s, height 8s;
}
</style>
</head>
<body>
  <div class="container">
    <img 
       src="https://www.google.de/logos/doodles/2014/european-parliament-election-2014-day-4-5483168891142144-hp.jpg" 
       />
    <!-- 366x200 -->
  </div>
</body>
</html>

【讨论】：