登录页面宽度设置失效求助：图片无法占满50%屏幕

问题原因分析 #

你的代码中已给.image-responsive和.login设置width:50%并通过float:left实现左右布局，但未给父容器.container设置宽度及清除浮动，同时.image-responsive未指定高度，这些因素可能导致布局计算异常，使得图片容器宽度未达到预期的50%屏幕宽度。

修复方案 #

修改CSS代码如下：

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/* 父容器设置100%宽度，清除浮动避免布局塌陷 */
.container {
  width: 100%;
  overflow: hidden;
}

.login {
  display: block;
  width: 50%;
  height: 100vh;
  border-radius: 10px;
  float: left;
  text-align: center;
  overflow: hidden;
}

.image-responsive {
  width: 50%;
  float: left;
  height: 100vh; /* 与login容器高度保持一致 */
}

.img-login {
  width: 100%;
  height: 100%;
  object-fit: cover; /* 保持图片比例，避免拉伸变形 */
}

关键修改点说明 #

• 给.container添加width:100%确保它占满屏幕宽度，同时用overflow:hidden清除浮动，避免子元素浮动导致父容器高度塌陷及布局计算错误。
• 给.image-responsive设置height:100vh，使其高度与.login容器一致，保证左右布局的视觉统一性。
• 给.img-login添加object-fit:cover，让图片在容器内保持比例填充，避免因强制设置宽高导致图片变形。

内容的提问来源于stack exchange，提问作者Vinícius Kock