如何将图片对齐到div左侧？登录弹窗布局问题求助

问题核心是弹窗容器未对内部图片和登录内容进行正确的并排布局，同时登录内容的margin: auto导致其脱离与图片的排版关联。以下是修正后的CSS方案，同时保留图片响应式和宽高比：

修改后的完整CSS #

/* 图片样式：保持宽高比+响应式 */
.login-image img {
    max-width: 500px; /* 最大宽度限制 */
    width: 100%; /* 小屏幕自动收缩 */
    height: auto; /* 自动维持宽高比 */
    object-fit: cover; /* 可选：图片比例不符时裁剪填充容器 */
}

/* 弹窗容器：用flex实现内部元素居中并排 */
.signInPopup,
.signUpPopup {
    display: none;
    position: fixed;
    z-index: 1;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    background-color: rgba(0,0,0,0.4); /* 可选：添加半透明背景增强层次感 */
    /* 关键：让内部元素水平垂直居中并横向排列 */
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 0; /* 图片与登录框的间距，可按需调整 */
}

/* 登录内容区：调整布局，去掉自动margin */
.signInPopup-content,
.signUpPopup-content {
    background-color: #fefefe;
    text-align: center;
    margin: 0; /* 移除原有auto margin，交由父容器flex控制居中 */
    padding: 20px;
    border: 1px solid #888;
    width: 400px; /* 调整为适配图片的宽度 */
    max-width: 100%; /* 小屏幕自动收缩 */
    height: 650px;
    max-height: 100vh; /* 避免超出视口高度 */
    overflow-y: auto; /* 内容过多时允许滚动 */
}

.close {
    border: none;
    background: none;
    float: right;
    font-size: 23px;
    font-weight: bold;
}

.close:hover,
.close:focus {
    text-decoration: none;
    cursor: pointer;
}

关键修改说明 #

• 弹窗容器的flex布局：通过display: flex让.login-image和.signInPopup-content横向并排，justify-content: center和align-items: center保证整个组合在屏幕中央对齐。
• 图片的响应式处理：用max-width限制最大尺寸，width:100%和height:auto确保小屏幕下自动缩小，同时严格维持原始宽高比。
• 登录内容区的调整：移除margin: auto避免脱离父容器排版控制，添加max-width:100%和max-height:100vh保证小设备适配性。

若需要图片与登录框高度完全一致，可给.login-image添加height: 650px; max-height: 100vh;，同时图片保留object-fit: cover实现容器填充。

内容的提问来源于stack exchange，提问作者user24279676