Question

此图片的尺寸为320 x 238.我想以179 x 179像素显示图像。我希望图像不倾斜，它需要捕获具有中心内容的大部分区域。可以使用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>

我的跨度属性是：

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;

Answer 1

首先 - 删除span并使用div代替。您应该使用span作为文本，而不是元素的块;您需要做的就是将父元素的宽度和高度设置为179 x 179px，并在图像上使用trasnform。工作示例：

＆＃13;

.each_project {
  width: 179px;
  height: 179px;
}
.each_project img {
  transform: translate(-50%, -50%);
}

＆＃13;

<div class="each_project">
  <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="">
</div>

＆＃13;

修改

我已将border添加到此示例中，因此您可以看到，这是居中的。我第一次没有得到它，但希望这就是你要找的东西。

＆＃13;
＆＃13;
.each_project { width: 179px; height: 179px; border: 1px solid red; } .each_project.larger { width: 300px; } .each_project .image { width: 100%; height: 100%; background-image: url('https://scontent.cdninstagram.com/t51.2885-15/s640x640/sh0.08/e35/13712196_1641293696198429_1628634962_n.jpg?ig_cache_key=MTMxNDE4MzE0NTczMDMzODQ1Mw%3D%3D.2'); background-repeat: no-repeat; background-position: center; background-size: cover; }
＆＃13;
<div class="each_project"> <div class="image"></div> </div> <div class="each_project larger"> <div class="image"></div> </div>
＆＃13;
＆＃13;
＆＃13;

Answer 2

你可以加上这个：

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

Answer 3

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

显示最大尺寸css的图像中心区域

3 个答案: