根据显示大小和未知边距重新定位背景图像

Question

为我的主页做了这个，并希望在显示尺寸减小时将背景图像内容作为图像的中间（现在它将图像的内容滑动到左侧）。考虑媒体查询，但客户端只允许一个CSS加载项，而不是不同的样式表文件。

另外，虽然陈述* margin = 0; padding = 0我的智能手机（Iphone 6）上出现了一个边距，并希望它像桌面一样全屏显示。使浏览器非常小，看看是否来自笔记本电脑/台式机。

它必须是CSS，因为我的客户端（Smugmug）只允许css和html块，没有javascript或任何东西。还会在页面中添加自己的CSS，以便在需要时发布链接。

是否有动态定位图像和边距的想法？谢谢！

＆＃13;

＆＃13;

html,
  body {
    height: 100%;
    width: 100%;
    margin: 0;
    padding; 0;
  }

  body {
    display: flex;
    flex-direction: column;
  }

  h1 {
    margin: 0;
  }

  a {
    display: inline-block;
  }

  #business-top {
    display: flex;
    flex: 1;
    height:50vh;
    width: 100%;
    align-items: center;
    justify-content: center;
    text-align: center;
    background-image : url(https://lluisballbe.smugmug.com/Assets-for-website/i-2KvXfrk/0/X3/_MG_9556-X3.jpg
  );
      background-size:cover;
  }

  #business-button {
    transition: all 1s;
    -webkit-transition: all 1s;
    height: 3em;
    width: 12em;
    background-color: #2B2A2A;
    border: .2em solid #ff7600;
    border-radius: 1.8em;
    margin: auto;
    text-align:center;
  }


  #logo-separator {
    text-align: center;
    top: calc( 50%-height_of_separator)px;
  }

  .separator {
    display: block;
    position: relative;
    padding: 0;
    height: 0;
    width: 100%;
    max-height: 0;
    font-size: 1px;
    line-height: 0;
    flex: 0;
    border-top: 1px solid #ff7600;
    border-bottom: 1px solid #ff7600;
  }

  #logo {
    margin: auto;
    max-width: 150px;
    display: inline-block;
    overflow: hidden;
    margin: -75px;
    position: absolute;
    z-index:1;
  }

  #photography-bottom {
    display: flex;
    flex: 1;
    width: 100%;
    height:50vh;
    align-items: center;
    justify-content: center;
    background-image : url(https://lluisballbe.smugmug.com/Assets-for-website/i-gPg5QBt/0/X3/_DSC5313-X3.jpg
  );
    background-size:cover;
  }

  #photography-button {
    height: 3em;
    width: 12em;
    background-color: #2B2A2A;
    border: .2em solid #ff7600;
    border-radius: 1.8em;
    margin: auto;
  }

  h1 {
    color: #ff7600;
    text-align: center;
    font-size: 1.4em;
    vertical-align: middle;
    line-height: 2.2em
  }

  #business-top,
  #photography-bottom {
    pointer-events: none;
    position: relative;
    transition: 1s;
    min-height: 200px;
  }

  #business-top a,
  #photography-bottom a {
    pointer-events: auto;
  }

＆＃13;

<div id="business-top">
  <a href="www.lluisballbe.smugmug.com">
    <div id="business-button">
      <h1>PHOTOGRAPHY</h1>
    </div>
  </a>
</div>

<div id="logo-separator">
  <div class="separator"></div>
  <div id="logo"><img src="https://lluisballbe.smugmug.com/Assets-for-website/i-CsMnM3R/0/Th/800x800-round-Th.png"> </div>
</div>

<div id="photography-bottom">
  <a href="www.lluisballbe.smugmug.com">
    <div id="photography-button">
      <h1>BUSINESS</h1>
    </div>
  </a>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 1

如果要定位背景图像，则需要使用背景位置。

html,
  body {
    height: 100%;
    width: 100%;
    margin: 0;
    padding: 0;
  }

  body {
    display: flex;
    flex-direction: column;
  }

  h1 {
    margin: 0;
  }

  a {
    display: inline-block;
  }

  #business-top {
    display: flex;
    flex: 1;
    height:50vh;
    width: 100%;
    align-items: center;
    justify-content: center;
    text-align: center;
    background-position: center center; 
    background-image : url(https://lluisballbe.smugmug.com/Assets-for-website/i-2KvXfrk/0/X3/_MG_9556-X3.jpg
  );
      background-size:cover;
  }

  #business-button {
    transition: all 1s;
    -webkit-transition: all 1s;
    height: 3em;
    width: 12em;
    background-color: #2B2A2A;
    border: .2em solid #ff7600;
    border-radius: 1.8em;
    margin: auto;
    text-align:center;
  }


  #logo-separator {
    text-align: center;
    top: calc( 50%-height_of_separator)px;
  }

  .separator {
    display: block;
    position: relative;
    padding: 0;
    height: 0;
    width: 100%;
    max-height: 0;
    font-size: 1px;
    line-height: 0;
    flex: 0;
    border-top: 1px solid #ff7600;
    border-bottom: 1px solid #ff7600;
  }

  #logo {
    margin: auto;
    max-width: 150px;
    display: inline-block;
    overflow: hidden;
    margin: -75px;
    position: absolute;
    z-index:1;
  }

  #photography-bottom {
    display: flex;
    flex: 1;
    width: 100%;
    height:50vh;
    align-items: center;
    justify-content: center;
    background-position: center center; 
    background-image : url(https://lluisballbe.smugmug.com/Assets-for-website/i-gPg5QBt/0/X3/_DSC5313-X3.jpg
  );
    background-size:cover;
  }

  #photography-button {
    height: 3em;
    width: 12em;
    background-color: #2B2A2A;
    border: .2em solid #ff7600;
    border-radius: 1.8em;
    margin: auto;
  }

  h1 {
    color: #ff7600;
    text-align: center;
    font-size: 1.4em;
    vertical-align: middle;
    line-height: 2.2em
  }

  #business-top,
  #photography-bottom {
    pointer-events: none;
    position: relative;
    transition: 1s;
    min-height: 200px;
  }

  #business-top a,
  #photography-bottom a {
    pointer-events: auto;
  }

<div id="business-top">
  <a href="www.lluisballbe.smugmug.com">
    <div id="business-button">
      <h1>PHOTOGRAPHY</h1>
    </div>
  </a>
</div>

<div id="logo-separator">
  <div class="separator"></div>
  <div id="logo"><img src="https://lluisballbe.smugmug.com/Assets-for-website/i-CsMnM3R/0/Th/800x800-round-Th.png"> </div>
</div>

<div id="photography-bottom">
  <a href="www.lluisballbe.smugmug.com">
    <div id="photography-button">
      <h1>BUSINESS</h1>
    </div>
  </a>
</div>

Answer 2

将此css属性添加到您的两个div

background-position: center;

就像这样的例子

 #business-top {
    display: flex;
    flex: 1;
    height:50vh;
    width: 100%;
    align-items: center;
    justify-content: center;
    text-align: center;
    background-image : url(https://lluisballbe.smugmug.com/Assets-for-website/i-2KvXfrk/0/X3/_MG_9556-X3.jpg);
    background-position: center;

  }

为你的其他div做这样的事情并尝试。