弯曲物品在更宽的屏幕上伸展
我刚刚使用flexbox开发了我的第一个网页。它在我的屏幕分辨率（1326x768）上看起来很棒但是当我在更大的屏幕（1894x787）上测试时，内容看起来很疯狂。以下是截图：
在1326x768
屏幕分辨率更高
我曾在某些元素上使用flex: 1 1 60%（当然％变化），但制作flex-grow: 0并没有真正做任何事情。
我只为图像容器（固定高度）设置了固定参数。我没有为任何容器设置固定宽度。
我在这里错过了有弹性盒子的东西吗？
我猜媒体查询可能是解决这个问题的一种方法，但是有没有其他解决方案，更灵活的方式来开发使用flex？
如何在不拉伸或过度压缩的所有屏幕尺寸中使页面看起来像这样？
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>
1 个答案:
答案 0 :(得分：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的固定高度。那里没有灵活性。
因此，图像水平柔韧，垂直不灵活，导致宽高比/失真度下降。
这个问题有几种可能的解决方案：
相关问题
最新问题
- 我写了这段代码，但我无法理解我的错误
- 我无法从一个代码实例的列表中删除 None 值，但我可以在另一个实例中。为什么它适用于一个细分市场而不适用于另一个细分市场？
- 是否有可能使 loadstring 不可能等于打印？卢阿
- java中的random.expovariate()
- Appscript 通过会议在 Google 日历中发送电子邮件和创建活动
- 为什么我的 Onclick 箭头功能在 React 中不起作用？
- 在此代码中是否有使用“this”的替代方法？
- 在 SQL Server 和 PostgreSQL 上查询，我如何从第一个表获得第二个表的可视化
- 每千个数字得到
- 更新了城市边界 KML 文件的来源？