html – 保持图像居中,同时保持100％的高度,只扩展裁剪边

概述问题 我有一个用户图像,我想用窗口向上和向下缩放,以便高度始终为100％并且图像保持居中. 例1 此示例在调整窗口大小时进行缩放,但高度不会保持在100％,因此会在底部被切断. .user { width: 100%; height: 100%; object-fit: cover; object-position: 50% 0%;} CodePen Exampl 问题

我有一个用户图像,我想用窗口向上和向下缩放,以便高度始终为100％并且图像保持居中.

例1

此示例在调整窗口大小时进行缩放,但高度不会保持在100％,因此会在底部被切断.

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

CodePen Example 1

例2

此示例完美地工作,除了当浏览器窗口的宽度小于图像的宽度时,右侧被切断.

我确实希望裁剪图像,但我希望右侧和左侧均匀裁剪.

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

CodePen Example 2

视觉示例

下面是我希望在浏览器水平/垂直缩放时如何显示图像的示例.

解决方法 一个想法是使用这样的多个背景：

我使用了多个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 >  <div  >  </div>  <div  >  </div></div><div >  <div  >  </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 >  <div  >    <div ></div>  </div>  <div  >    <div ></div>  </div></div><div >  <div  >    <div ></div>  </div></div>

总结

以上是内存溢出为你收集整理的html – 保持图像居中,同时保持100％的高度,只扩展/裁剪边全部内容，希望文章能够帮你解决html – 保持图像居中,同时保持100％的高度,只扩展/裁剪边所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。