如何将矩形图片裁剪为正方形并实现图文并排且不影响后续元素

核心修改点 #

• 用Flex布局替代浮动，彻底解决后续元素错位问题
• 通过容器+object-fit: cover实现图片正方形裁剪，保留图片比例
• 调整结构实现文本与图片的并排布局

修改后的代码 #

CSS

body {
  margin: 20px;
}

/* 图文模块：Flex布局实现并排，自动清除浮动 */
.square {
  display: flex;
  gap: 15px; /* 图片与文本的间距 */
  align-items: flex-start; /* 顶部对齐 */
  margin-bottom: 20px; /* 与后续元素的间距 */
}

/* 正方形图片容器 */
.image-container {
  width: 135px;
  height: 135px;
  overflow: hidden;
}

.image-container img {
  width: 100%;
  height: 100%;
  object-fit: cover; /* 裁剪图片为正方形，保持比例 */
}

.square p {
  flex: 1; /* 文本占据剩余宽度 */
  margin: 0;
}

HTML

<div class="square">
  <!-- 文本在图片左侧，先放置文本 -->
  <p>
    Adding bands to the wrists allow the sleeves to take a different shape. Please note, bands will be the same color as rest of the garment unless otherwise stated in the notes box below.
  </p>
  <div class="image-container">
    <img src="https://bespokeattireco.com/cdn/shop/files/IMG-1944.jpg?v=1699514408" alt="Garment with wrist bands">
  </div>
</div>

<!-- 示例后续元素，会自动显示在图文模块下方 -->
<div>
  这是后续元素，不会再跑到图片右侧
</div>

说明 #

1. 正方形裁剪：通过固定宽高的容器隐藏溢出部分，object-fit: cover让图片按比例填充容器，裁剪掉超出的区域，避免图片拉伸变形。
2. 布局修复：Flex布局天然支持元素并排，且容器会包裹内部元素，后续元素会自动流到模块下方，无需手动清除浮动。
3. 位置调整：如果需要文本在图片右侧，只需调换HTML中<p>和.image-container的顺序即可。

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