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

标签 html css flexbox

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

1326x768

At 1326x768

屏幕分辨率较高

at higher resolution

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>

最佳答案

这是您问题的根源:

.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;
}

如果您将图像指定为宽度:100% 和高度:360px，请考虑其结果。

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

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

因此，图像在水平方向上灵活，在垂直方向上不灵活，从而导致纵横比/失真的损失。

此问题有多种可能的解决方案:

关于html - 在更宽的屏幕上拉伸(stretch)的 flex 元素，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/40415970/

上一篇：php - 我可以在创建 PDF 时在 mPdf 中使用内联 css 吗？

下一篇：javascript - 将html文本内容传入javascript函数，可高亮多句

相关文章：

javascript - 从下拉列表中选择类似的选项

javascript - 如何动态循环到 UL 和 LI 元素中？

php - 主页登录表单 - Wordpress

css - 按屏幕宽度线性缩放值

html - 为什么我的图片在 flexbox 中没有变小？

html - 导航按钮不显示内联

css - 悬停时无法更改按钮

javascript - CSS 在加载时临时更改行的背景颜色。

html - 将要显示的部分文章与第三个元素居中对齐

具有可变高度的 css flex 网格

©2024 IT工具网  联系我们