保持图像居中，同时保持100％的高度，仅扩展/裁剪两侧。

Question

问题

我有一张用户图片，想要随着窗口大小的变化进行缩放，使其高度始终为100%，并且保持图像居中。

---

示例1

这个示例会随着窗口大小的改变进行缩放，但是高度不会保持在100%，因此底部会被裁剪。

.user {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 50% 0%;
}

示例1代码

---

示例2

这个示例运行良好，只是当浏览器窗口的宽度小于图片的宽度时，右边会被切掉。

我希望图片被裁剪，但希望左右两侧被同等地裁剪。

.user {
    object-position: center;
    display: block;
    height: 100%;
    margin-left: auto;
    margin-right: auto;
}

CodePen示例2

---

可视化示例

以下是一个示例，展示了当浏览器水平/垂直缩放时我想要图片的显示效果。

- Polygami

---

恭喜！整洁地提问了！ - Fer García

Answer 1

一种想法是使用多个背景，就像这样：

我使用多个不同尺寸的div进行说明。

body,
html {
  height: 100vh;
  margin: 0;
}

.bg-shine {
  background-position: center;
  background-repeat: no-repeat;
  background-size: auto 100%, cover;
  background-image: url("https://icons.iconarchive.com/icons/paomedia/small-n-flat/512/user-male-icon.png"), url("https://t.motionelements.com/stock-video/design-elements/me1656952-blue-sunrise-background-hd-a0120-poster.jpg");
}

<div style="display: inline-block;">
  <div class="bg-shine" style="height:100px;width:400px;">

  </div>
  <div class="bg-shine" style="height:100px;width:200px;">

  </div>
</div>
<div style="display: inline-block;">
  <div class="bg-shine" style="height:200px;width:100px;">

  </div>
</div>

更新

为了避免在CSS中使用图像，您可以考虑使用内联样式和单独的div来放置用户图像，这样就几乎可以使用与图像标记相同的标记：

body,
html {
  height: 100vh;
  margin: 0;
}

.bg-shine {
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  background-image: url("https://t.motionelements.com/stock-video/design-elements/me1656952-blue-sunrise-background-hd-a0120-poster.jpg");
}

.bg-shine>div {
  background-size: auto 100%;
  background-position: center;
  background-repeat: no-repeat;
  height:100%;
}

<div style="display: inline-block;">
  <div class="bg-shine" style="height:100px;width:400px;">
    <div style="background-image:url('https://icons.iconarchive.com/icons/paomedia/small-n-flat/512/user-male-icon.png')"></div>
  </div>
  <div class="bg-shine" style="height:100px;width:200px;">
    <div style="background-image:url('https://icons.iconarchive.com/icons/paomedia/small-n-flat/512/user-male-icon.png')"></div>
  </div>
</div>
<div style="display: inline-block;">
  <div class="bg-shine" style="height:200px;width:100px;">
    <div style="background-image:url('https://icons.iconarchive.com/icons/paomedia/small-n-flat/512/user-male-icon.png')"></div>
  </div>
</div>

- Temani Afif

---

这个看起来非常完美。唯一的问题是我想从数据库中拉取许多不同的用户，而不想为每个用户创建一个CSS规则。我将使用EJS创建一个带有嵌入式JavaScript的HTML模板。我可以在内联样式中执行此操作，但如果有多个用户的网格，则会有很多代码重复。我意识到我在原始帖子中没有提到这一点。我现在会添加进去。这里是使用多个背景的版本 - Polygami

@Polygami，使用内联样式几乎和使用带有图像标签的URL一样重复 :)唯一的区别在于它会更长。不过，你也可以随时将其拆分为两个divs;) 我会更新的。 - Temani Afif

@Polygami 我编辑了我的答案，你可以再次检查 :) 你将拥有与图像标签相同的代码 ;) - Temani Afif

我没有想到那个！那样做更好，而且几乎有同样数量的HTML。正确的工作版本 - Polygami

Answer 2

我喜欢你的问题！我从不同的角度来处理它，尝试使用背景而不是img元素。请在这里查看结果：

https://codepen.io/Varin/pen/xYqXQe

body, html {
 height: 100vh;
 margin: 0;
}

.bg-shine {
  height: 100vh;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  background-image: url("http://t.motionelements.com/stock-video/design-elements/me1656952-blue-sunrise-background-hd-a0120-poster.jpg");
  position: relative;
}

.image {
  
  padding:0;
  margin:0;
  width: 100%;
  height:100%;
  position:absolute;
  top:50%;
  left:50%;
  transform: translate(-50%, -50%);
  background-image:url('http://icons.iconarchive.com/icons/paomedia/small-n-flat/512/user-male-icon.png');
  background-repeat: no-repeat;
  background-position: center center;
  background-size: auto 100%;
}

 <div class="bg-shine">
    <div class="image">
  </div>
  </div>

- Varin