文档建议反馈控制台
首页
学习
活动
专区
圈层
工具
MCP广场
文章/答案/技术大牛
发布
社区首页 >问答首页 >屏幕大小对齐图像和div

问屏幕大小对齐图像和div
EN

Stack Overflow用户
提问于 2017-07-27 08:00:15
回答 3查看 54关注 0票数 0

我试图设计我的第一个网站，我有困难对齐我的顶部条css与我的标志，我有一种感觉，我这样做是不正确的，因为根据用户的屏幕大小，它也将看起来不同的固定高度css值。

这就是我希望它在所有屏幕解析中看起来的样子：

​

这就是它在较低屏幕上的样子：

​

​

下面是我的标记：

​

代码语言：javascript
复制
h1 {
  color: #111;
  font-family: 'Helvetica Neue', sans-serif;
  font-size: 45px;
  font-weight: bold;
  letter-spacing: -1px;
  line-height: 1;
  padding: 20px;
}

h2 {
  color: #111;
  font-family: 'Open Sans', sans-serif;
  font-size: 30px;
  font-weight: 300;
  line-height: 32px;
  margin: 0 0 72px;
  text-align: center;
}

p {
  color: #685206;
  font-family: 'Helvetica Neue', sans-serif;
  font-size: 14px;
  line-height: 24px;
  margin: 0 0 24px;
  text-align: justify;
  text-justify: inter-word;
}

html,
body {
  height: 100%;
  margin: 0;
  font-size: 20px;
}

.topbar {
  background-color: #EEB84F;
  width: 100%;
  height: 40px;
  padding: 5px;
  position: fixed;
}

.logo {
  min-width: 100%;
  width: auto;
}

.wrapper {
  display: flex;
  flex-flow: row wrap;
  justify-content: space-around;
  margin-top: -50px;
}

.thumbwrapper {
  width: auto;
}

.thumb {
  background: white;
  float: left;
  margin: 20px;
}

.thumb {
  width: 121px;
  height: 174px;
}

.img {
  box-shadow: 10px 10px 5px #888888;
  max-width: 100%;
  width: 121px;
  height: 174px;
  border-radius: 6px;
}

.img:hover {
  box-shadow: 10px 10px 5px #666688;
  cursor: pointer;
}

.left {
  width: 10%;
  height: 100%;
  position: fixed;
  outline: 1px solid;
  background: #333;
}

.right {
  width: 90%;
  height: auto;
  outline: 0px solid;
  position: absolute;
  right: 0;
  background: #FFF;
}
代码语言：javascript
复制
<div class="left">
  <div class="logo"><img src="http://d2tsz823kvlf97.cloudfront.net/static/logo2.png" width="100%" /></div>
</div>

<div class="right">
  <div class="topbar"></div>
  <h1>Latest Additions</h1>
  <div class="wrapper">
    <div class="thumbwrapper">
      <div class="thumb"><img src="http://d2tsz823kvlf97.cloudfront.net/AntiMatter_2016.png" class="img"></div>
      <div class="thumb"><img src="http://d2tsz823kvlf97.cloudfront.net/DianaOurMotherHerLifeandLegacy_2017.png" class="img"></div>
      <div class="thumb"><img src="http://d2tsz823kvlf97.cloudfront.net/ThePersianConnection_2016.png" class="img"></div>
      <div class="thumb"><img src="http://d2tsz823kvlf97.cloudfront.net/BloodHunt_2017.png" class="img"></div>
      <div class="thumb"><img src="http://d2tsz823kvlf97.cloudfront.net/UFConFoxWeidmanvsGastelum_2017.png" class="img"></div>
      <div class="thumb"><img src="http://d2tsz823kvlf97.cloudfront.net/TheOttomanLieutenant_2017.png" class="img"></div>
      <div class="thumb"><img src="http://d2tsz823kvlf97.cloudfront.net/Wildflower_2016.png" class="img"></div>
      <div class="thumb"><img src="http://d2tsz823kvlf97.cloudfront.net/NoWaytoLive_2016.png" class="img"></div>
      <div class="thumb"><img src="http://d2tsz823kvlf97.cloudfront.net/CopandaHalfNewRecruit_2017.png" class="img"></div>
      <div class="thumb"><img src="http://d2tsz823kvlf97.cloudfront.net/TheHorseDancer_2017.png" class="img"></div>
      <div class="thumb"><img src="http://d2tsz823kvlf97.cloudfront.net/KillingGround_2016.png" class="img"></div>
      <div class="thumb"><img src="http://d2tsz823kvlf97.cloudfront.net/DanceAcademyTheMovie_2017.png" class="img"></div>
      <div class="thumb"><img src="http://d2tsz823kvlf97.cloudfront.net/Hypersomnia_2016.png" class="img"></div>
      <div class="thumb"><img src="http://d2tsz823kvlf97.cloudfront.net/LostVegasHiway_2017.png" class="img"></div>
      <div class="thumb"><img src="http://d2tsz823kvlf97.cloudfront.net/Wildflower_2017.png" class="img"></div>
      <div class="thumb"><img src="http://d2tsz823kvlf97.cloudfront.net/KissandCry_2017.png" class="img"></div>
      <div class="thumb"><img src="http://d2tsz823kvlf97.cloudfront.net/ForgottenEvil_2017.png" class="img"></div>
      <div class="thumb"><img src="http://d2tsz823kvlf97.cloudfront.net/TheMidwife_2017.png" class="img"></div>
      <div class="thumb"><img src="http://d2tsz823kvlf97.cloudfront.net/AwakentheShadowman_2017.png" class="img"></div>
      <div class="thumb"><img src="http://d2tsz823kvlf97.cloudfront.net/ShotCaller_2017.png" class="img"></div>
      <div class="thumb"><img src="http://d2tsz823kvlf97.cloudfront.net/ViceroysHouse_2017.png" class="img"></div>
      <div class="thumb"><img src="http://d2tsz823kvlf97.cloudfront.net/StoryOfAGirl_2017.png" class="img"></div>
      <div class="thumb"><img src="http://d2tsz823kvlf97.cloudfront.net/JasperJones_2017.png" class="img"></div>
      <div class="thumb"><img src="http://d2tsz823kvlf97.cloudfront.net/AKindAffair_2017.png" class="img"></div>
      <div class="thumb"><img src="http://d2tsz823kvlf97.cloudfront.net/LegoDCSuperHeroGirlsBrainDrain_2017.png" class="img"></div>
      <div class="thumb"><img src="http://d2tsz823kvlf97.cloudfront.net/DiaryofaWimpyKidTheLongHaul_2017.png" class="img"></div>
      <div class="thumb"><img src="http://d2tsz823kvlf97.cloudfront.net/TheChristmasCure_2017.png" class="img"></div>
      <div class="thumb"><img src="http://d2tsz823kvlf97.cloudfront.net/Wakefield_2016.png" class="img"></div>
      <div class="thumb"><img src="http://d2tsz823kvlf97.cloudfront.net/ADeadlyAffair_2017.png" class="img"></div>
      <div class="thumb"><img src="http://d2tsz823kvlf97.cloudfront.net/FatalDefense_2017.png" class="img"></div>
      <div class="thumb"><img src="http://d2tsz823kvlf97.cloudfront.net/TheArtofUs_2017.png" class="img"></div>
      <div class="thumb"><img src="http://d2tsz823kvlf97.cloudfront.net/FirstKill_2017.png" class="img"></div>
    </div>
  </div>
</div>

​

或者你可以在这个在线位置现场观看

css
html
EN

回答 3

Stack Overflow用户

回答已采纳

发布于 2017-07-27 08:10:52

问题是，当你在较小的屏幕上时，你的logo图像会缩小。因为图像必须适合您在10% div上设置的.left宽度。

现在，我不会改变您的整个结构，但是我建议您将50px的高度设置为.logo (图像周围的div )和一个background-color: #EEB84F。这是因为topbar设置了这些样式。

然后，您可以使用display:flex在logo上对logo img进行中心设置。

见下面的片段或小提琴> jsFiddle

​

代码语言：javascript
复制
.logo  {
  min-height:50px;
  background:#EEB84F;
  display:flex;
  align-items:center;
}

h1 {
  color: #111;
  font-family: 'Helvetica Neue', sans-serif;
  font-size: 45px;
  font-weight: bold;
  letter-spacing: -1px;
  line-height: 1;
  padding: 20px;
}

h2 {
  color: #111;
  font-family: 'Open Sans', sans-serif;
  font-size: 30px;
  font-weight: 300;
  line-height: 32px;
  margin: 0 0 72px;
  text-align: center;
}

p {
  color: #685206;
  font-family: 'Helvetica Neue', sans-serif;
  font-size: 14px;
  line-height: 24px;
  margin: 0 0 24px;
  text-align: justify;
  text-justify: inter-word;
}

html,
body {
  height: 100%;
  margin: 0;
  font-size: 20px;
}

.topbar {
  background-color: #EEB84F;
  width: 100%;
  height: 40px;
  padding: 5px;
  position: fixed;
}

.logo {
  min-width: 100%;
  width: auto;
}

.wrapper {
  display: flex;
  flex-flow: row wrap;
  justify-content: space-around;
  margin-top: -50px;
}

.thumbwrapper {
  width: auto;
}

.thumb {
  background: white;
  float: left;
  margin: 20px;
}

.thumb {
  width: 121px;
  height: 174px;
}

.img {
  box-shadow: 10px 10px 5px #888888;
  max-width: 100%;
  width: 121px;
  height: 174px;
  border-radius: 6px;
}

.img:hover {
  box-shadow: 10px 10px 5px #666688;
  cursor: pointer;
}

.left {
  width: 10%;
  height: 100%;
  position: fixed;
  outline: 1px solid;
  background: #333;
}

.right {
  width: 90%;
  height: auto;
  outline: 0px solid;
  position: absolute;
  right: 0;
  background: #FFF;
}
代码语言：javascript
复制
<div class="left">
  <div class="logo"><img src="http://d2tsz823kvlf97.cloudfront.net/static/logo2.png" width="100%" /></div>
</div>

<div class="right">
  <div class="topbar"></div>
  <h1>Latest Additions</h1>
  <div class="wrapper">
    <div class="thumbwrapper">
      <div class="thumb"><img src="http://d2tsz823kvlf97.cloudfront.net/AntiMatter_2016.png" class="img"></div>
      <div class="thumb"><img src="http://d2tsz823kvlf97.cloudfront.net/DianaOurMotherHerLifeandLegacy_2017.png" class="img"></div>
      <div class="thumb"><img src="http://d2tsz823kvlf97.cloudfront.net/ThePersianConnection_2016.png" class="img"></div>
      <div class="thumb"><img src="http://d2tsz823kvlf97.cloudfront.net/BloodHunt_2017.png" class="img"></div>
      <div class="thumb"><img src="http://d2tsz823kvlf97.cloudfront.net/UFConFoxWeidmanvsGastelum_2017.png" class="img"></div>
      <div class="thumb"><img src="http://d2tsz823kvlf97.cloudfront.net/TheOttomanLieutenant_2017.png" class="img"></div>
      <div class="thumb"><img src="http://d2tsz823kvlf97.cloudfront.net/Wildflower_2016.png" class="img"></div>
      <div class="thumb"><img src="http://d2tsz823kvlf97.cloudfront.net/NoWaytoLive_2016.png" class="img"></div>
      <div class="thumb"><img src="http://d2tsz823kvlf97.cloudfront.net/CopandaHalfNewRecruit_2017.png" class="img"></div>
      <div class="thumb"><img src="http://d2tsz823kvlf97.cloudfront.net/TheHorseDancer_2017.png" class="img"></div>
      <div class="thumb"><img src="http://d2tsz823kvlf97.cloudfront.net/KillingGround_2016.png" class="img"></div>
      <div class="thumb"><img src="http://d2tsz823kvlf97.cloudfront.net/DanceAcademyTheMovie_2017.png" class="img"></div>
      <div class="thumb"><img src="http://d2tsz823kvlf97.cloudfront.net/Hypersomnia_2016.png" class="img"></div>
      <div class="thumb"><img src="http://d2tsz823kvlf97.cloudfront.net/LostVegasHiway_2017.png" class="img"></div>
      <div class="thumb"><img src="http://d2tsz823kvlf97.cloudfront.net/Wildflower_2017.png" class="img"></div>
      <div class="thumb"><img src="http://d2tsz823kvlf97.cloudfront.net/KissandCry_2017.png" class="img"></div>
      <div class="thumb"><img src="http://d2tsz823kvlf97.cloudfront.net/ForgottenEvil_2017.png" class="img"></div>
      <div class="thumb"><img src="http://d2tsz823kvlf97.cloudfront.net/TheMidwife_2017.png" class="img"></div>
      <div class="thumb"><img src="http://d2tsz823kvlf97.cloudfront.net/AwakentheShadowman_2017.png" class="img"></div>
      <div class="thumb"><img src="http://d2tsz823kvlf97.cloudfront.net/ShotCaller_2017.png" class="img"></div>
      <div class="thumb"><img src="http://d2tsz823kvlf97.cloudfront.net/ViceroysHouse_2017.png" class="img"></div>
      <div class="thumb"><img src="http://d2tsz823kvlf97.cloudfront.net/StoryOfAGirl_2017.png" class="img"></div>
      <div class="thumb"><img src="http://d2tsz823kvlf97.cloudfront.net/JasperJones_2017.png" class="img"></div>
      <div class="thumb"><img src="http://d2tsz823kvlf97.cloudfront.net/AKindAffair_2017.png" class="img"></div>
      <div class="thumb"><img src="http://d2tsz823kvlf97.cloudfront.net/LegoDCSuperHeroGirlsBrainDrain_2017.png" class="img"></div>
      <div class="thumb"><img src="http://d2tsz823kvlf97.cloudfront.net/DiaryofaWimpyKidTheLongHaul_2017.png" class="img"></div>
      <div class="thumb"><img src="http://d2tsz823kvlf97.cloudfront.net/TheChristmasCure_2017.png" class="img"></div>
      <div class="thumb"><img src="http://d2tsz823kvlf97.cloudfront.net/Wakefield_2016.png" class="img"></div>
      <div class="thumb"><img src="http://d2tsz823kvlf97.cloudfront.net/ADeadlyAffair_2017.png" class="img"></div>
      <div class="thumb"><img src="http://d2tsz823kvlf97.cloudfront.net/FatalDefense_2017.png" class="img"></div>
      <div class="thumb"><img src="http://d2tsz823kvlf97.cloudfront.net/TheArtofUs_2017.png" class="img"></div>
      <div class="thumb"><img src="http://d2tsz823kvlf97.cloudfront.net/FirstKill_2017.png" class="img"></div>
    </div>
  </div>
</div>

​

作为建议，您应该将.topbar放在left和right div之外。然后把徽标放进去。

你的结构应该是

代码语言：javascript
复制
<div class="topbar">
    <div class="logo">
            <img src="http://d2tsz823kvlf97.cloudfront.net/static/logo2.png" width="100%" />
    </div>
</div>
<div class="content">
    <div class="left">
    </div>
    <div class="right">
    </div>
</div>

也不知道为什么需要这个left div，您可以很容易地使gray部分没有新的div (边框或伪元素等等)。

票数 1
EN

Stack Overflow用户

发布于 2017-07-27 08:13:30

如果您希望徽标始终处于顶部而不重叠，则可以将该徽标图像的特定高度设置为“关于height: 50px”。否则，使用媒体查询为较低的分辨率专门设置其高度。

票数 0
EN

Stack Overflow用户

发布于 2017-07-27 08:21:54

您只需增加.logo的高度，与.topbar + padding的高度相同。然后使用transform在.logo中心对齐图像，如果需要的话，您可能需要使用特定屏幕分辨率的媒体查询。

​

代码语言：javascript
复制
h1 {
  color: #111;
  font-family: 'Helvetica Neue', sans-serif;
  font-size: 45px;
  font-weight: bold;
  letter-spacing: -1px;
  line-height: 1;
  padding: 20px;
}

h2 {
  color: #111;
  font-family: 'Open Sans', sans-serif;
  font-size: 30px;
  font-weight: 300;
  line-height: 32px;
  margin: 0 0 72px;
  text-align: center;
}

p {
  color: #685206;
  font-family: 'Helvetica Neue', sans-serif;
  font-size: 14px;
  line-height: 24px;
  margin: 0 0 24px;
  text-align: justify;
  text-justify: inter-word;
}

html,
body {
  height: 100%;
  margin: 0;
  font-size: 20px;
}

.topbar {
  background-color: #EEB84F;
  width: 100%;
  height: 40px;
  padding: 5px;
  position: fixed;
}

.logo {
  width: 100%;
  height: 50px;
  background-color: #EEB84F;
}

.logo > img {
  position: relative;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.wrapper {
  display: flex;
  flex-flow: row wrap;
  justify-content: space-around;
  margin-top: -50px;
}

.thumbwrapper {
  width: auto;
}

.thumb {
  background: white;
  float: left;
  margin: 20px;
}

.thumb {
  width: 121px;
  height: 174px;
}

.img {
  box-shadow: 10px 10px 5px #888888;
  max-width: 100%;
  width: 121px;
  height: 174px;
  border-radius: 6px;
}

.img:hover {
  box-shadow: 10px 10px 5px #666688;
  cursor: pointer;
}

.left {
  width: 10%;
  height: 100%;
  position: fixed;
  outline: 1px solid;
  background: #333;
}

.right {
  width: 90%;
  height: auto;
  outline: 0px solid;
  position: absolute;
  right: 0;
  background: #FFF;
}
代码语言：javascript
复制
<div class="left">
  <div class="logo"><img src="http://d2tsz823kvlf97.cloudfront.net/static/logo2.png" width="100%" /></div>
</div>

<div class="right">
  <div class="topbar"></div>
  <h1>Latest Additions</h1>
  <div class="wrapper">
    <div class="thumbwrapper">
      <div class="thumb"><img src="http://d2tsz823kvlf97.cloudfront.net/AntiMatter_2016.png" class="img"></div>
      <div class="thumb"><img src="http://d2tsz823kvlf97.cloudfront.net/DianaOurMotherHerLifeandLegacy_2017.png" class="img"></div>
      <div class="thumb"><img src="http://d2tsz823kvlf97.cloudfront.net/ThePersianConnection_2016.png" class="img"></div>
      <div class="thumb"><img src="http://d2tsz823kvlf97.cloudfront.net/BloodHunt_2017.png" class="img"></div>
      <div class="thumb"><img src="http://d2tsz823kvlf97.cloudfront.net/UFConFoxWeidmanvsGastelum_2017.png" class="img"></div>
      <div class="thumb"><img src="http://d2tsz823kvlf97.cloudfront.net/TheOttomanLieutenant_2017.png" class="img"></div>
      <div class="thumb"><img src="http://d2tsz823kvlf97.cloudfront.net/Wildflower_2016.png" class="img"></div>
      <div class="thumb"><img src="http://d2tsz823kvlf97.cloudfront.net/NoWaytoLive_2016.png" class="img"></div>
      <div class="thumb"><img src="http://d2tsz823kvlf97.cloudfront.net/CopandaHalfNewRecruit_2017.png" class="img"></div>
      <div class="thumb"><img src="http://d2tsz823kvlf97.cloudfront.net/TheHorseDancer_2017.png" class="img"></div>
      <div class="thumb"><img src="http://d2tsz823kvlf97.cloudfront.net/KillingGround_2016.png" class="img"></div>
      <div class="thumb"><img src="http://d2tsz823kvlf97.cloudfront.net/DanceAcademyTheMovie_2017.png" class="img"></div>
      <div class="thumb"><img src="http://d2tsz823kvlf97.cloudfront.net/Hypersomnia_2016.png" class="img"></div>
      <div class="thumb"><img src="http://d2tsz823kvlf97.cloudfront.net/LostVegasHiway_2017.png" class="img"></div>
      <div class="thumb"><img src="http://d2tsz823kvlf97.cloudfront.net/Wildflower_2017.png" class="img"></div>
      <div class="thumb"><img src="http://d2tsz823kvlf97.cloudfront.net/KissandCry_2017.png" class="img"></div>
      <div class="thumb"><img src="http://d2tsz823kvlf97.cloudfront.net/ForgottenEvil_2017.png" class="img"></div>
      <div class="thumb"><img src="http://d2tsz823kvlf97.cloudfront.net/TheMidwife_2017.png" class="img"></div>
      <div class="thumb"><img src="http://d2tsz823kvlf97.cloudfront.net/AwakentheShadowman_2017.png" class="img"></div>
      <div class="thumb"><img src="http://d2tsz823kvlf97.cloudfront.net/ShotCaller_2017.png" class="img"></div>
      <div class="thumb"><img src="http://d2tsz823kvlf97.cloudfront.net/ViceroysHouse_2017.png" class="img"></div>
      <div class="thumb"><img src="http://d2tsz823kvlf97.cloudfront.net/StoryOfAGirl_2017.png" class="img"></div>
      <div class="thumb"><img src="http://d2tsz823kvlf97.cloudfront.net/JasperJones_2017.png" class="img"></div>
      <div class="thumb"><img src="http://d2tsz823kvlf97.cloudfront.net/AKindAffair_2017.png" class="img"></div>
      <div class="thumb"><img src="http://d2tsz823kvlf97.cloudfront.net/LegoDCSuperHeroGirlsBrainDrain_2017.png" class="img"></div>
      <div class="thumb"><img src="http://d2tsz823kvlf97.cloudfront.net/DiaryofaWimpyKidTheLongHaul_2017.png" class="img"></div>
      <div class="thumb"><img src="http://d2tsz823kvlf97.cloudfront.net/TheChristmasCure_2017.png" class="img"></div>
      <div class="thumb"><img src="http://d2tsz823kvlf97.cloudfront.net/Wakefield_2016.png" class="img"></div>
      <div class="thumb"><img src="http://d2tsz823kvlf97.cloudfront.net/ADeadlyAffair_2017.png" class="img"></div>
      <div class="thumb"><img src="http://d2tsz823kvlf97.cloudfront.net/FatalDefense_2017.png" class="img"></div>
      <div class="thumb"><img src="http://d2tsz823kvlf97.cloudfront.net/TheArtofUs_2017.png" class="img"></div>
      <div class="thumb"><img src="http://d2tsz823kvlf97.cloudfront.net/FirstKill_2017.png" class="img"></div>
    </div>
  </div>
</div>

​

票数 0
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：

https://stackoverflow.com/questions/45344706

复制
相关文章

相似问题

领券

腾讯云开发者

扫码关注腾讯云开发者

扫码关注腾讯云开发者

领取腾讯云代金券

热门产品

热门推荐

更多推荐

Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有 

深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 粤公网安备44030502008569号

腾讯云计算（北京）有限责任公司 京ICP证150476号 |  京ICP备11018762号

问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档