响应式布局中iPad视图下图片向右偏移问题求助

我正在为网站实现响应式布局，目前已完成99%，但有一个问题始终无法解决。iPad视图下顶部图片出现向右偏移的情况，截图如下：

相关代码 #

HTML #

<div class="home-box home-box-one">
        {% for photograph in photos %} 
            <div class="photo-box">
                <a href="{% url 'viewphoto' photograph.slug %}">
                    <img id="recent-photo" src="{{photograph.photo.url}}" style="object-fit: cover;">
                </a>
            </div>
        {% endfor %}     
        
    <div class="home-btn-container">
        <a href="{% url 'gallery' %}">
            <button type="button" class="btn btn-outline-secondary rounded-0 home-button custom-button">View Gallery</button>
        </a>
    </div>
</div>

CSS #

.home-box {
  width: 100%;
  height: auto;
  display: flex;
  flex-wrap: wrap;
  padding: 0.6rem;
  position: relative;
  text-align: center;
  align-items: center;
  justify-content: space-evenly;
}
img#recent-photo {
  width: 25rem;
  height: 25rem;
  -moz-box-shadow: 0 0 7px rgba(0, 0, 0, 0.5);
  -webkit-box-shadow: 0 0 7px rgba(0, 0, 0, 0.5);
  box-shadow: 0 0 7px rgba(0, 0, 0, 0.5);
}
.home-btn-container {
  width: 100%;
  margin-top: 1rem;
}
.photo-box {
  text-align: center;
}
body {
  background-repeat: no-repeat;
  background-size: cover;
  background-attachment: fixed;
  overflow-x: hidden;
  background-image: url(/static/images/background.jpg);
  margin-bottom: 5rem !important;
  height: 100%;
}

html {
  position: relative;
  min-height: 100%;
  padding-bottom: 5rem;
}
.container {
  margin-top: 0.6rem;
  padding: 0;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
}

修复方案 #

1. 限制图片最大宽度，避免溢出 #

图片设置了固定的25rem宽度，在iPad这类中等宽度设备上容易超出容器范围导致偏移。给图片添加最大宽度限制，确保它自适应容器：

img#recent-photo {
  width: 25rem;
  max-width: 100%; /* 新增：不超过父容器宽度 */
  height: 25rem;
  -moz-box-shadow: 0 0 7px rgba(0, 0, 0, 0.5);
  -webkit-box-shadow: 0 0 7px rgba(0, 0, 0, 0.5);
  box-shadow: 0 0 7px rgba(0, 0, 0, 0.5);
}

如果想保持正方形比例同时高度自适应，替换固定高度为宽高比：

img#recent-photo {
  width: 25rem;
  max-width: 100%;
  aspect-ratio: 1/1; /* 替换height:25rem，保持正方形 */
  -moz-box-shadow: 0 0 7px rgba(0, 0, 0, 0.5);
  -webkit-box-shadow: 0 0 7px rgba(0, 0, 0, 0.5);
  box-shadow: 0 0 7px rgba(0, 0, 0, 0.5);
}

2. 修正容器盒模型，避免宽度溢出 #

.home-box设置了width:100%和padding:0.6rem，默认盒模型下内边距会额外增加宽度，导致容器超出视口。添加box-sizing: border-box让内边距包含在宽度内：

.home-box {
  width: 100%;
  box-sizing: border-box; /* 新增 */
  height: auto;
  display: flex;
  flex-wrap: wrap;
  padding: 0.6rem;
  position: relative;
  text-align: center;
  align-items: center;
  justify-content: space-evenly;
}

3. 检查父容器宽度限制 #

确保home-box的所有父容器（比如.container）没有设置超出视口的宽度，且同样应用box-sizing: border-box，避免嵌套容器导致的宽度叠加问题。

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