保持图像居中，同时保持 100% 的高度和只有 extending/cropping 个边

Question

问题

我有一张用户图片，我想用 window 放大和缩小它，以便高度始终为 100% 并且图片保持居中。

示例 1

此示例会随着 window 的大小调整而缩放，但高度不会保持在 100%，因此在底部被截断。

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

CodePen Example 1

示例 2

除了当浏览器的宽度window小于图像的宽度时，右手边被截掉之外，这个例子非常完美。

我做想要裁剪图像，但我希望左右两边被裁剪相等.

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

CodePen Example 2

视觉示例

这是我希望图像在缩放浏览器时如何显示的示例 horizontally/vertically。

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>

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>

保持图像居中，同时保持 100% 的高度和只有 extending/cropping 个边

Keeping an image centered, while maintaining 100% height and only extending/cropping the sides

html

css

css-position

background-image

问题

示例 1

示例 2

视觉示例