图像和文本内联和堆叠以实现响应

Question

自从我真正编码以来已经有一段时间了，我的头脑无法解决这个（简单的）问题。我需要在页面顶部有一个横幅，右侧有一个图像，左侧有一个文本，看起来是一个长图像，BG 与实际图像混合。我还需要图像以较小的屏幕尺寸堆叠在文本之上。我可能在处理很多事情时遇到麻烦。让文本与图像垂直对齐，让文本 div 与图像等高，最重要的是让 2 正确堆叠。我需要图像在堆叠时调整大小并填充 100%，并且文本在图像下方居中。任何帮助都会很棒。这是一个非常简单的问题，我知道，而且我确定这里有一堆多余或不必要的东西...

* {
    box-sizing: border-box;
}

.row {
  display: block;
  width: 100%;
  vertical-align:middle;
  align-content:center;
  text-align:center

}

.column2 {
    float: left;
    width: 35%;
    padding: 0px;
 vertical-align:middle; 
 min-width: 250px;
 align-content:center
}

.column1 {
    float: right;
    padding: 0px;  
 max-width: 65% ;
 min-width: 250px;
  align-content:center

}

.column1 img {
  max-width: 100%;
  height: auto;
 }

/* Clearfix (clear floats) */
.row::after {
    content: "";
    clear: both;
    display: table;
}

img {
width:100%;
height: auto;
}

@media screen and (max-width: 500px) {
    .column1 .column2 { display: block; }
}
/* Responsive layout - makes the three columns stack on top of each other instead of next to each other */
@media screen and (max-width: 500px) {
    .column1 {
        width: 100%; height: auto
    }
    
    .column2 {
        width: 100%; background:#ffffff
    }
 
}

 @media screen and (min-width: 501px)  {
  
  .row {
     background:#f2f1eb
  }
 }

<div class="row">
  <div class="column1">
    <img src="https://picsum.photos/1200/300/?gravity=east" alt="Dog" style="width:100%; align-content:center; vertical-align:middle">
  </div>
  <div class="column2">
    <div style="width:100%; vertical-align:middle"><p align="center" style="vertical-align:middle">We love having your family members as part of our community. </p> </div>
  </div>




</div>

Answer 1

我不确定我是否正确理解了您想要实现的目标（因为您没有回答我的问题）但是如果您希望图像和文本在大分辨率下对齐并在小分辨率下堆叠：

* {
  box-sizing: border-box;
}

.row {
  display: flex;
  align-items: stretch;
  background: #efefef;
}

.column1 {
  width: 35%;
  min-width: 250px;
  display: flex;
  align-items: center;
}

.column2 {
  width: 65%;
}

.text {
  display: flex;
  align-items: center;
  padding: 0 10px;
  margin: 0;
  font: 14px/1.5 arial, sans-serif;
  text-align: center;
}

.column1 img {
  max-width: 100%;
  height: auto;
}

@media (max-width: 575px) {
  .row {
    flex-direction: column;
  }
  .column1, .column2 {width: 100%}
  .column1 {
    order: 2;
  }
  .text {
    padding: 15px 10px;
  }
}

<div class="row">
  <div class="column1">
    <p class="text">We love having your family members as part of our community.</p>
  </div>
  <div class="column2">
    <img src="https://picsum.photos/1200/300/?gravity=east" alt="Dog" style="width:100%; align-content:center; vertical-align:middle">
  </div>
</div>

图像和文本内联和堆叠以实现响应

Image and text inline and stacked for responsive

text

inline

image

banner

responsive