Html 使用最大大小css显示图像的中心区域

,

此图像的尺寸为320 x 238。我想用179x179px显示图像。我希望图像不歪斜，它需要捕捉最中心的内容区域。使用CSS可以吗

我的HTML：

<span class="each_project">
    <figure>
     <img src="https://scontent.cdninstagram.com/t51.2885-15/s640x640/sh0.08/e35/13712196_1641293696198429_1628634962_n.jpg?ig_cache_key=MTMxNDE4MzE0NTczMDMzODQ1Mw%3D%3D.2" alt=""></a>
    </figure>

</span>

您可以添加以下内容：

span img {
    top: 50%;
    left: 50%;
    position: absolute;
    width: 100%;
    height: auto;
    transform: translate(-50%, -50%);
}

---

首先-去掉

span

，改用

div

。您应该使用

span

作为文本，而不是元素的块；您只需将父元素的宽度和高度设置为179 x 179px，并在图像上使用

trasnform

。工作示例：

。每个项目{
宽度：179px；
高度：179px；
}
.每个项目img{
转换：翻译（-50%，-50%）；
}

---

是否可以在没有背景图像的情况下执行此操作。我从Instagram上获取它，我有多个需要循环的程序。我认为这是最快的方法，可以在所有主流浏览器上使用。如果使用

元素，则需要JavaScript帮助。但是您可以使用内联样式，比如

，它在循环中具有相同的效果。至少，当我需要这样的东西时，我使用内联样式。

span img {
    top: 50%;
    left: 50%;
    position: absolute;
    width: 100%;
    height: auto;
    transform: translate(-50%, -50%);
}

.each_project {
  box-sizing: border-box;
  color: rgb(34, 34, 34);
  floatleftfont-family: "Lato";
  font-size: 16px;
  height: 179px;
  line-height: 24px;
  margin-bottom: 0px;
  margin-right: 0px;
  overflow: hidden;
  overflow-x: hidden;
  overflow-y: hidden;
  position: relative;
  width: 179px;
  display: inline-block;
}
.each_project img {
  margin: -100%;
}