Figma布局中图片及内容的等比例缩放实现方案问询

核心思路 #

以Figma设计稿的基准宽度（1440px）为参考，使用**CSS变量+视口单位（vw）**统一计算所有元素的尺寸、间距和字体大小，确保屏幕尺寸变化时，所有内容严格按照设计稿比例缩放。

修改后的完整代码 #

CSS代码

/* 定义基准宽度变量，对应Figma设计稿宽度 */
:root {
  --base-width: 1440;
}

.techno-articles {
  margin-top: calc(104 / var(--base-width) * 100vw);
}

.item__techno-article_content {
  display: flex;
}

@media (max-width: 696px) {
  .item__techno-article_content {
    flex-wrap: wrap;
  }
  .item__techno-article_image {
    flex: 1 1 100%;
  }
  .item__techno-article_body {
    flex: 1 1 100%;
    padding-left: 0;
    padding-top: calc(40 / var(--base-width) * 100vw);
  }
}

.item__techno-article_image {
  width: calc(735 / var(--base-width) * 100vw);
  position: relative;
  overflow: hidden;
}

/* 保持图片固定宽高比：550/735 ≈ 74.8% */
.item__techno-article_image::before {
  content: '';
  display: block;
  width: 100%;
  padding-top: calc(550 / 735 * 100%);
}

.item__techno-article_image img {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  object-fit: cover;
}

.item__techno-article_body {
  flex: 1 1 auto;
  padding-top: calc(80 / var(--base-width) * 100vw);
  padding-left: calc(96 / var(--base-width) * 100vw);
  padding-right: calc(133 / var(--base-width) * 100vw);
}

.item__techno-article_title {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 700;
  font-size: calc(36 / var(--base-width) * 100vw);
  line-height: calc(48 / var(--base-width) * 100vw);
  color: #4D533C;
}

.item__techno-article_text {
  padding-top: calc(24 / var(--base-width) * 100vw);
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 400;
  font-size: calc(16 / var(--base-width) * 100vw);
  line-height: calc(26 / var(--base-width) * 100vw);
  color: rgba(33, 56, 66, 0.6);
}

.item__techno-article_link {
  margin-top: calc(90 / var(--base-width) * 100vw);
  color: rgba(33, 56, 66, 0.6);
}

.item__techno-article_comment {
  background-color: #fff;
  box-shadow: 50px 50px 100px rgba(0, 0, 0, 0.145947);
  border-radius: calc(8 / var(--base-width) * 100vw);
  position: relative;
  z-index: 400;
  margin: calc(-158 / var(--base-width) * 100vw) calc(664 / var(--base-width) * 100vw) 0 calc(323 / var(--base-width) * 100vw);
  width: calc(453 / var(--base-width) * 100vw);
}

.item__techno-article_comment_ownership {
  display: flex;
  align-items: center;
  padding-left: calc(30 / var(--base-width) * 100vw);
}

.item__techno-article_comment_author_image {
  width: calc(90 / var(--base-width) * 100vw);
  height: calc(90 / var(--base-width) * 100vw);
}

.item__techno-article_comment_text {
  font-family: 'Poppins';
  font-style: italic;
  font-weight: 400;
  font-size: calc(16 / var(--base-width) * 100vw);
  line-height: calc(26 / var(--base-width) * 100vw);
  padding-top: calc(30 / var(--base-width) * 100vw);
  padding-left: calc(30 / var(--base-width) * 100vw);
  padding-right: calc(33 / var(--base-width) * 100vw);
}

.item__techno-article_comment_author {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 700;
  font-size: calc(16 / var(--base-width) * 100vw);
  line-height: calc(24 / var(--base-width) * 100vw);
}

.item__techno-article_comment_author_position {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 400;
  font-size: calc(14 / var(--base-width) * 100vw);
  line-height: calc(21 / var(--base-width) * 100vw);
  color: #152934;
}

.item__techno-article_text>*:not(:last-child) {
  margin-bottom: calc(36 / var(--base-width) * 100vw);
}

HTML代码

<section class="techno-articles">
  <div class="techno-articles__container techno__block_container">
    <div class="techno-articles__items">
      <div class="techno-article__item item__techno-article">
        <div class="item__techno-article_example">
          <div class="item__techno-article_content">
            <div class="item__techno-article_image">
              <img src="https://i.sstatic.net/GQ6vV.png" alt="technoDVD">
            </div>
            <div class="item__techno-article_body">
              <div class="item__techno-article_title">The wall new Balenciaga.com</div>
              <div class="item__techno-article_text">
                <p class="first__p">This article is floated online with an aim to help you find the best dvd printing solution.</p>
                <p class="second__p">Dvd printing is an important feature used by large and small DVD production houses to print information on DVDs.</p>
              </div>
              <div class="item__techno-article_link">See Case Study</div>
            </div>
          </div>
          <div class="item__techno-article_comment">
            <div class="item__techno-article_comment_text">
              “In my history of working with trade show vendors, I can honestly say that there is not one company that I've ever worked with that has better service than Exhibit Systems.”
            </div>
            <div class="item__techno-article_comment_ownership">
              <div class="item__techno-article_comment_author_image">
                <img src="https://i.sstatic.net/1ZRZu.png" alt="Author comment">
              </div>
              <div class="item__techno-article_comment_author_info">
                <div class="item__techno-article_comment_author">Angel Armstrong</div>
                <div class="item__techno-article_comment_author_position">Founder & CEO, Google</div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>

关键改动说明 #

1. 全局基准变量：定义--base-width: 1440对应Figma设计稿宽度，所有尺寸计算都基于这个变量，后续修改设计稿宽度只需调整此变量。
2. 统一尺寸计算：将所有固定像素值（margin、padding、font-size、width等）替换为calc(设计稿像素值 / var(--base-width) * 100vw)，确保元素尺寸随视口宽度等比例变化。
3. 图片宽高比固定：图片容器的padding-top使用自身宽度的比例（550/735），而非全局基准宽度，保证图片始终保持设计稿的宽高比。
4. 移动端适配优化：在小屏幕媒体查询中调整内容布局，同时保持缩放比例的一致性。

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