html - flex 元素在更宽的屏幕上拉伸(stretch)

Question

我刚刚使用 flexbox 开发了我的第一个网页。它在我的屏幕分辨率 (1326x768) 上看起来很棒，但是当我在更大的屏幕 (1894x787) 上测试它时，内容看起来疯狂地拉伸(stretch)。以下是屏幕截图:

分辨率为 1326x768

在更高的屏幕分辨率下

Codepen

我在某些元素上使用了 flex: 1 1 60%(百分比当然不同)，但是制作 flex-grow: 0 并没有真正做任何事情.

我只为图像容器设置了固定参数(固定高度)。我没有为任何容器设置固定宽度。

我是不是漏掉了一些 flex 盒子的东西？

我想媒体查询可能是解决这个问题的一种方法，但是否有任何其他解决方案，一种使用 flex 进行开发的更健壮的方法？

如何使页面在所有屏幕尺寸下都看起来像预期的那样，而不是拉伸(stretch)或过度压缩？

html,
body {
  height: 100%;
  width: 100%;
  padding: 0;
  margin: 0;
}
body {
  display: flex;
  flex-direction: column;
}
* {
  box-sizing: border-box;
}
p {
  margin: 0;
  padding: 0;
}
a {
  text-decoration: none;
}
.margin-end {
  margin-bottom: 40px;
}
.margin-start {
  margin-top: 10px;
}
header {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  color: #6e6e6e;
  font-family: AvenirLTStd-Roman;
  font-weight: bolder;
  font-size: 1rem;
  box-shadow: 0 1px 6px rgba(0, 0, 0, 0.11);
  /*box-shadow: 0px 10px 5px -9px rgba(0,0,0,0.75);*/
  /*border-bottom: solid 1px #ececec;*/
}
.banner-heading {
  margin-left: 350px;
  font-weight: bolder;
  font-size: 1.875rem;
}
.secondary-heading {
  /*	border: solid;
*/
  display: flex;
  flex-direction: row;
  margin-right: 60px;
  font-size: 0.8rem;
  justify-content: center;
  position: relative;
  /*	margin: auto;
*/
}
.secondary-heading-1 {
  padding-right: 60px;
  /* vertical centering */
  position: relative;
  top: 50%;
  transform: translateY(-50%);
  font-weight: lighter;
}
.secondary-heading-2 {
  /* vertical centering */
  position: relative;
  top: 50%;
  transform: translateY(-50%);
  color: #6e6e6e;
  font-weight: lighter;
}
.secondary-heading-1 a,
.secondary-heading-2 a {
  color: #6e6e6e;
}
.main-content {
  display: flex;
  flex-direction: row;
  /*	border:solid;
*/
  margin-left: 350px;
  margin-right: 60px;
}
.main-content-left {
  /*	border:dashed;*/
  /*width: 200px;
	height: 200px;*/
  display: flex;
  flex-direction: column;
  flex: 0 1 60%;
  padding-right: 20px;
}
.main-content-left-heading {
  width: 100%;
  border-bottom: solid 1px #959595;
  padding-bottom: 20px;
  padding-top: 20px;
}
.main-content-right {
  /*border: dashed;*/
  /*width: 200px;
	height: 200px;*/
  margin-left: auto;
  flex: 0 1 40%;
}
.main-content-left-heading p {
  /*margin:0;
	padding:0;*/
  line-height: 100%;
}
.main-content-left-heading-1 {
  font-family: AvenirLTStd-Roman;
  font-style: italic;
  color: #6e6e6e;
}
.main-content-left-heading-2 {
  padding-top: 5px;
  font-family: AvenirLTStd-Roman;
  color: #6e6e6e;
  font-weight: bolder;
  font-size: 1.5rem
}
.main-content-left-image-1 {
  padding: 0;
  margin: 0;
  /*	border: solid;
*/
  width: 100%;
  height: 360px;
  background-image: url("https://gallery.mailchimp.com/f68128197412f5658c731b840/images/010fa5bb-20b9-4603-8e31-3a5e053d936f.png");
  background-size: 100% 100%;
  background-repeat: no-repeat;
  background-position: center;
}
.main-content-left-image-2 {
  padding: 0;
  margin: 0;
  /*	border: solid;
*/
  width: 100%;
  height: 360px;
  background-image: url("https://gallery.mailchimp.com/f68128197412f5658c731b840/images/a49ee715-cd02-4b16-9164-941585e2fbbe.png");
  background-size: 100% 100%;
  background-repeat: no-repeat;
}
.main-content-left-image-3 {
  padding: 0;
  margin: 0;
  /*	border: solid;
*/
  width: 100%;
  height: 360px;
  background-image: url("https://gallery.mailchimp.com/f68128197412f5658c731b840/images/2b74f1ec-1a17-4c84-b162-ff62437cd705.png");
  background-size: 100% 100%;
  background-repeat: no-repeat;
}
.main-content-left-text {
  /*	border:solid;
*/
  display: flex;
  flex-direction: row;
  margin-top: solid;
  padding-top: 20px;
  /*	padding-bottom: 20px;
*/
}
.main-content-left-text-group-left {
  padding: 10px 60px 10px 0px;
}
.main-content-left-text-group-left-1 {
  padding-bottom: 10px;
  font-family: SourceSansBold;
  font-size: 0.875rem;
  font-weight: 900;
}
.main-content-left-text-group-left-2 {
  font-family: SourceSansBold;
  font-size: 0.875rem;
  color: #888585;
  font-weight: 900;
}
.main-content-left-text-group-right {
  padding: 10px;
  border-left: solid 1px #959595;
}
.main-content-left-text-group-right-1 {
  font-family: Avenir-Next-LT-Pro-Demi;
  font-size: 1.45rem;
  padding-bottom: 20px;
  color: #444444;
  font-weight: bolder;
}
.main-content-left-text-group-right-2 {
  font-size: 1rem;
  font-family: SourceSansPro-Regular;
}
.main-content-right {
  border-left: solid 1px #959595;
  margin-top: 20px;
  padding-right: 65px;
  padding-left: 20px;
  display: flex;
  flex-direction: column;
}
.main-content-right-heading {
  border-bottom: solid 2px #363636;
  height: 65px;
  display: flex;
}
.main-content-right-heading p {
  font-size: 0.9rem;
  margin-top: auto;
  font-family: SourceSansBolder;
  font-weight: bolder
}
.main-content-right-content {
  padding-top: 10px;
  padding-bottom: 10px;
  border-bottom: solid 1px #959595;
}
.main-content-right-image-1 {
  width: 100%;
  height: 180px;
  background: url("https://gallery.mailchimp.com/f68128197412f5658c731b840/images/2b74f1ec-1a17-4c84-b162-ff62437cd705.png") no-repeat;
  background-size: 100% 100%;
}
.main-content-right-image-2 {
  width: 100%;
  height: 180px;
  background: url("https://gallery.mailchimp.com/f68128197412f5658c731b840/images/2b74f1ec-1a17-4c84-b162-ff62437cd705.png") no-repeat;
  background-size: 100% 100%;
}
.main-content-right-image-3 {
  width: 100%;
  height: 180px;
  background: url("https://gallery.mailchimp.com/f68128197412f5658c731b840/images/2b74f1ec-1a17-4c84-b162-ff62437cd705.png") no-repeat;
  background-size: 100% 100%;
}
.main-content-right-group {
  /*border:solid;*/
  /*	padding-bottom: 10px;
*/
}
.main-content-right-group-1 {
  padding-top: 10px;
  color: #b8b6b6;
  font-family: SourceSansBold;
  font-size: 0.875rem
}
.main-content-right-group-2 {
  padding-top: 10px;
  font-family: Avenir-Next-LT-Pro-Demi;
  font-weight: bolder;
  color: #444444;
  font-size: 1.1rem;
}

<header>
  <h1 class="banner-heading">Entrepreneurs Weekly</h1>
  <div class="secondary-heading">
    <h3 class="secondary-heading-1"><a href="">BECOME A CURATOR</a></h3>
    <h3 class="secondary-heading-2"><a href="">ABOUT</a></h3>
  </div>
</header>
<div class="main-content">
  <div class="main-content-left">
    <div class="main-content-left-heading">
      <p class="main-content-left-heading-1">Week 008,</p>
      <p class="main-content-left-heading-2">How To create the next Steve Jobs</p>
    </div>
    <div class="main-content-left-heading">
      <div class="main-content-left-image-1">
        <!-- 							<img src="assets/WeeklyContent1.png" />
 -->
      </div>
      <div class="main-content-left-text">
        <div class="main-content-left-text-group-left">
          <p class="main-content-left-text-group-left-1">POLITICS</p>
          <p class="main-content-left-text-group-left-2">NYTIMES.COM</p>
        </div>
        <div class="main-content-left-text-group-right">
          <p class="main-content-left-text-group-right-1">New York magazine turns a history of shopping recommendations into a new online revenue stream</p>
          <p class="main-content-left-text-group-right-2">Making money from $195 fitted sheets and Japanese women’s facial razors.</p>
        </div>
      </div>
    </div>
    <div class="main-content-left-heading">
      <div class="main-content-left-image-2">
        <!-- 							<img src="assets/WeeklyContent1.png" />
 -->
      </div>
      <div class="main-content-left-text">
        <div class="main-content-left-text-group-left">
          <p class="main-content-left-text-group-left-1">POLITICS</p>
          <p class="main-content-left-text-group-left-2">NYTIMES.COM</p>
        </div>
        <div class="main-content-left-text-group-right">
          <p class="main-content-left-text-group-right-1">The Texas Tribune updates its premium political coverage for an email</p>
          <p class="main-content-left-text-group-right-2">Making money from $195 fitted sheets and Japanese women’s facial razors.</p>
        </div>
      </div>
    </div>
    <div class="main-content-left-heading margin-end">
      <div class="main-content-left-image-3">
        <!-- 							<img src="assets/WeeklyContent1.png" />
 -->
      </div>
      <div class="main-content-left-text">
        <div class="main-content-left-text-group-left">
          <p class="main-content-left-text-group-left-1">POLITICS</p>
          <p class="main-content-left-text-group-left-2">NYTIMES.COM</p>
        </div>
        <div class="main-content-left-text-group-right">
          <p class="main-content-left-text-group-right-1">The Incline, Billy Penn’s new sister site, launches in Pittsburgh</p>
          <p class="main-content-left-text-group-right-2">Like Billy Penn in Philadelphia, the Pittsburgh site will focus on attracting a younger audience through events and aggregation in addition to original reporting.</p>
        </div>
      </div>
    </div>
  </div>
  <div class="main-content-right">
    <div class="main-content-right-heading">
      <p>THE LATEST FROM ENTREPRENEUR'S WEEKLY</p>
    </div>

    <div class="main-content-right-content margin-start">
      <div class="main-content-right-image-1">
        <!-- image goes as background -->
      </div>
      <div class="main-content-right-group">
        <p class="main-content-right-group-1">WEEK 01</p>
        <p class="main-content-right-group-2">New York magazine turns a history of shopping recommendations into a new online revenue stream</p>
      </div>

    </div>
    <div class="main-content-right-content">
      <div class="main-content-right-image-2">
        <!-- image goes as background -->
      </div>
      <div class="main-content-right-group">
        <p class="main-content-right-group-1">WEEK 01</p>
        <p class="main-content-right-group-2">New York magazine turns a history of shopping recommendations into a new online revenue stream</p>
      </div>
    </div>
    <div class="main-content-right-content">
      <div class="main-content-right-image-3">
        <!-- image goes as background -->
      </div>
      <div class="main-content-right-group">
        <p class="main-content-right-group-1">WEEK 01</p>
        <p class="main-content-right-group-2">New York magazine turns a history of shopping recommendations into a new online revenue stream</p>
      </div>
    </div>
  </div>
</div>

Answer 1

这是您问题的根源:

.main-content-left-image-1 {
  padding: 0;
  margin: 0;
  width: 100%;   <---- problem
  height: 360px; <---- problem
  background-image: url("https://gallery.mailchimp.com/f6...");
  background-size: 100% 100%;
  background-repeat: no-repeat;
  background-position: center;
}
.main-content-left-image-2 {
  padding: 0;
  margin: 0;
  width: 100%;   <---- problem
  height: 360px; <---- problem
  background-image: url("https://gallery.mailchimp.com/f6...");
  background-size: 100% 100%;
  background-repeat: no-repeat;
}

如果您将图像设置为 width: 100% 和 height: 360px，请考虑结果如何。

宽度始终是容器的全长。无论屏幕是宽还是窄，图像都会随之变化。

但是你设置了固定高度360px。那里没有灵 active 。

因此，图像在水平方向上是灵活的，在垂直方向上是不灵活的，这会导致宽高比损失/失真。

这个问题有几种可能的解决方案:

• Responsive css background images
• How to make CSS background-image responsive?