Bootstrap 4图片缩放不响应：如何实现图片及文本响应式？

嘿，我来帮你搞定这个响应式的问题！从你给出的代码来看，主要问题出在父容器的定位设置和图片/文本的响应式属性缺失上。下面是具体的修改方案，让图片和上面的文本在网站缩放时都能自适应：

1. 给父容器设置相对定位 #

首先，你的section容器需要设置position: relative，这样绝对定位的.img-heading才会相对于这个容器定位，而不是整个页面。添加这段CSS：

section {
  position: relative;
  width: 100%;
  max-width: 100%; /* 确保容器不会超出视口范围 */
  overflow: hidden; /* 防止图片缩放时溢出容器 */
}

2. 优化图片的响应式属性 #

你已经给图片加了width: 100%，但还需要补充高度相关的属性，让图片保持原始宽高比，同时自适应容器：

<section>
  <img src="images/cover.jpg" style="width: 100%; height: auto; object-fit: cover;" >
  <div class="row img-heading">
    <h1>Five Star Homes</h1>
  </div>
</section>

• height: auto：让图片高度随宽度自动调整，保持原始宽高比
• object-fit: cover：让图片铺满容器，同时裁剪多余部分（如果需要完整显示图片，可换成object-fit: contain）

3. 让叠加文本也实现响应式 #

你的.img-heading已经用了transform，但需要补全并添加响应式字体和布局属性，确保文本在缩放时始终居中且大小合适：

.img-heading {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%); /* 这一步是让文本真正居中，修正你未写完的代码 */
  width: 100%;
  text-align: center;
  padding: 0 20px; /* 防止文本在小屏幕上贴边 */
}

.img-heading h1 {
  font-size: clamp(1.5rem, 4vw, 3rem); /* 响应式字体：最小1.5rem，最大3rem，随视口宽度自动调整 */
  color: #ffffff; /* 根据你的设计调整文本颜色，这里假设是白色 */
  margin: 0;
}

这样修改后，当你缩放网站时，图片会自适应容器宽度并保持比例，叠加的标题文本也会始终居中，字体大小随视口变化，整体完全实现响应式效果啦！

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