响应低于 700[x 时图像不完全可见

Question

有一个名为 article 两个子 div 的容器，其中一个具有图像作为背景，另一个具有文本。 我在 max width:700 px 处设置了一个断点，将其更改为 coulmn 并将图像的宽度（具有文章预览类）更改为 100 % flex 为无。 但是当我调整大小时，尽管宽度为 100 %，但图像的大小正在增长和缩小，但在某些时候，可以看到一半的图像没有显示完整的长度。

 <div class="container">
        <div class="article">
          <div class="article-preview"></div>
          <div class="article-info">
            <h1>
              Have the courage to follow your heart and intuition. 
            </h1>
            <p>
              Steve Jobs was is one of the most respected entrepreneurs and inventors of his time. In 1976 he founded Apple together with his friend Steve Wozniak. They created their first computer, the Apple I, in the garage of Jobs’ parents. 
            </p>
            <div class="article-author">
             <i class="fa fa-apple" aria-hidden="true"></i>
              <div class="author-info">
                <span class="author-name">Steven Paul Jobs</span>
                <span class="date">28 Jun 2020</span>
              </div>
           
            </div>
            
          </div>
        </div>
      </div>

.article {
        height: 280px;
        max-width: 700px;
        display: flex;
        flex-direction: row;
}

    /* Article Preview Section */

    .article-preview {
        height: 280px;
        width: 290px;
        width: 100%;
        background: url('https://images.unsplash.com/photo-1591843336309-cbf414ad7978?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1567&q=80g');
        background-size: cover;
        background-position: top center;
        border-top-left-radius: 10px;
        border-bottom-left-radius: 10px;
        flex: 1;
    }

    /* Article Info Section */

    .article-info {
        flex: 1.19;
        background: #ffff;
        border-bottom-left-radius: 10px;
        border-bottom-right-radius: 10px;
        padding-left: 40px;
        padding-right: 35px;
        padding-top: 25px;
        padding-bottom: 30px;
        position: relative;
    }

    .article-info h1 {
        font-size: 20px;
        line-height: 1.5;
        margin-bottom: 15px;
    }

    .article-info p {
        font-size: 12px;
        line-height: 1.5;
        margin-bottom: 20px;
        padding-right: 8px;
    }
@media  (max-width: 700px) {
    .article{
       
        height: auto;
        display: flex;
        flex-direction: column;
       
    }
    .article-preview{
        width: 100%;
        flex: none;
        border-top-right-radius: 10px;
        border-bottom-left-radius: 0px;
        height: 280px;
    }
    
}

Answer 1

通过您提供的代码，我理解的是。当您的屏幕尺寸低于 700 像素时，flex 应该在列方向上，以使图像位于顶部，但当前当您减小屏幕尺寸时，图像尺寸会减小。作为建议/解决方案，您可以提供的是

background-size: contain;
background-repeat: no-repeat;

到article-preview 当您的屏幕尺寸低于 700 像素时，背景图像将具有固定宽度，它会随着窗口尺寸的变化而缩小/增长，但不会中途中断。所以我认为这将是一个很好的解决方案。否则，你可以给

background-position: center;

到媒体查询中的article-preview。同样，图像会缩小/增长。但图像将始终位于中心，并且与父级保持 100% 的宽度。

除了这两种方法，你可以给图像100%的宽度和100%的高度，但是这样图像就会迷失方向。

enter code here

.article {
        height: 280px;
        max-width: 700px;
        display: flex;
        flex-direction: row;
}

    /* Article Preview Section */

    .article-preview {
        height: 280px;
        width: 290px;
        width: 100%;
        background: url('https://images.unsplash.com/photo-1591843336309-cbf414ad7978?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1567&q=80g');
        background-size: cover;
        background-position: top center;
        border-top-left-radius: 10px;
        border-bottom-left-radius: 10px;
        flex: 1;
    }

    /* Article Info Section */

    .article-info {
        flex: 1.19;
        background: #ffff;
        border-bottom-left-radius: 10px;
        border-bottom-right-radius: 10px;
        padding-left: 40px;
        padding-right: 35px;
        padding-top: 25px;
        padding-bottom: 30px;
        position: relative;
    }

    .article-info h1 {
        font-size: 20px;
        line-height: 1.5;
        margin-bottom: 15px;
    }

    .article-info p {
        font-size: 12px;
        line-height: 1.5;
        margin-bottom: 20px;
        padding-right: 8px;
    }
@media  (max-width: 700px) {
    .article{
        height: auto;
        display: flex;
        flex-direction: column;
    }
    .article-preview{
        width: 100%;
        flex: none;
        border-top-right-radius: 10px;
        border-bottom-left-radius: 0px;
        height: 280px;
        background-size: contain;
        background-repeat: no-repeat;
    }
}

 <div class="container">
        <div class="article">
          <div class="article-preview"></div>
          <div class="article-info">
            <h1>
              Have the courage to follow your heart and intuition. 
            </h1>
            <p>
              Steve Jobs was is one of the most respected entrepreneurs and inventors of his time. In 1976 he founded Apple together with his friend Steve Wozniak. They created their first computer, the Apple I, in the garage of Jobs’ parents. 
            </p>
            <div class="article-author">
             <i class="fa fa-apple" aria-hidden="true"></i>
              <div class="author-info">
                <span class="author-name">Steven Paul Jobs</span>
                <span class="date">28 Jun 2020</span>
              </div>
           
            </div>
            
          </div>
        </div>
      </div>