时间戳

首页 > 解决方案 > svg图像的响应式定位

css - svg图像的响应式定位

问题描述

我正在尝试定位两个 SVG 图像（Tobias-Raketfart.svg class="turbotobias-shake turbotobias-rocket-img" & TurboTobias-Blue-clouds.svg class="turbotobias-smoke"）。每次我想出一个解决方案时，它都远远没有响应。

我一直在玩 position: absolute; 然后用底部和右侧定位。这使得结果在我的 PC 显示器上看起来不错，但在几乎任何其他屏幕上都很糟糕。我可以做些什么来定位这两个 SVG 图像？

我试图实现的最终结果的移动模型

我试图实现的最终结果的 PC 模型

HTML：

<body>
    <div class='turbotobias-hero-section-wrapper'>
        <div class='turbotobias-row'>
            <div class='turbotobias-column'>
                <div class='turbotobias-first-column'>
                    <h1 class="turbotobias-fp-h1">Vil du have
                        <div class="turbotobias-h1-enhanced">raketfart</div>
                        <div class="turbotobias-h1-smaller">på din hjemmeside?</div>
                    </h1>
                    <span class="turbotobias-sub-h1">Jeg ta'r din hjemmeside til skyerne!</span>
                </div>
            </div>
            <div class='turbotobias-column'>
                <div class='turbotobias-second-column'>
                    <img src="https://turbotobias.dk/wp-content/uploads/2019/07/Turno-Tobias-Raketfart.svg" alt="" class="turbotobias-shake turbotobias-rocket-img">
                    <img src="https://turbotobias.dk/wp-content/uploads/2019/07/TurboTobias-Blue-clouds.svg" alt="" class="turbotobias-smoke"></img>
                </div>
            </div>
            <div class="turbotobias-divider-clouds"></div>
        </div>
    </div>
</body>

CSS：

body {
  background: #fff;
  color: #333333;
  margin: 0;
  box-sizing: border-box;
  font-family: open sans,Arial,sans-serif;
  font-size: 14px;
  overflow: hidden;
  word-break: break-word;
}

.turbotobias-hero-section-wrapper {
  height: 100vh;
  background: url(https://turbotobias.dk/wp-content/uploads/2019/07/Light-Above-clouds-HD-TurboTobias.jpg);
  background-size: cover;
  background-attachment: fixed;
  background-repeat: no-repeat;
}

.turbotobias-column .turbotobias-first-column {
  display: flex;
  align-self: center;
  align-items: center;
  flex-direction: column;
}

.turbotobias-first-column {
  font-weight: 700;
  text-transform: uppercase;
  background-color: rgba(0,0,0,0);
  border-left-width: 10px;
  border-left-style: solid;
  border-left-color: #0082a4;
  padding-top: 20px!important;
  padding-bottom: 20px!important;
  padding-left: 20px!important;
  margin-top: 0px!important;
  display: flex;
  align-items: center;
}

.turbotobias-h1-enhanced {
  font-weight: 900;
  font-size: 120%;
}

.turbotobias-h1-smaller {
  font-size: 70%;
}

@media (min-width: 980px) {
h1.turbotobias-fp-h1 {
  padding-bottom: 0px;
  margin-bottom: 0px;
  margin-top: 0px;
  font-weight: 700;
  font-size: 60px !important;
  color: #303030!important;
  line-height: 1em;
  text-transform: uppercase;
}
}

@media (max-width: 979px) {
  h1.turbotobias-fp-h1 {
      padding-bottom: 0px;
      margin-bottom: 0px;
      margin-top: 0px;
      font-weight: 700;
      font-size: 33px !important;
      color: #303030!important;
      line-height: 1em;
      text-transform: uppercase;
  }
  }

.turbotobias-sub-h1 {
  font-size: 24px;
  color: #303030;
  font-weight: 400;
  font-family: open sans,Arial,sans-serif;
  text-transform: uppercase;
  text-align: left;
}

.turbotobias-row {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  width: 80%;
  max-width: 1080px;
  height: 100vh;
  margin: auto;
}

.turbotobias-column {
  display: flex;
  flex-direction: column;
  flex-basis: 100%;
}

.turbotobias-smoke {
  position:absolute;
  bottom: 0;
  width: 470px;
  height: auto;
  z-index: 9;
  right: 30%;
}

.turbotobias-rocket-img {
  position: absolute;
  bottom: 30%;
  right: 36%;
  width: 180px;
  height: auto;
  z-index: 11;
}

.turbotobias-divider-clouds {
  background-image: url(https://turbotobias.dk/wp-content/uploads/2019/07/clouds-divider.svg);
  background-size: cover;
  background-position: center top;
  bottom: 0;
  left: 0;
  height: 100px;
  position: absolute;
  width: 100%;
  z-index: 10;
}


@media screen and (min-width: 800px) {
  .turbotobias-column {
  align-self: center;
    flex: 1
  }
}

@media (max-width: 980px) {
  .turbotobias-row {
      padding: 30px 0;
  }
}

代码片段

标签： csssvgpositioncss-position

解决方案

已经进行了一些更改。问题是，为什么云没有出现？- Light-Above-clouds-HD-TurboTobias.jpg 该类的 Divturbotobias-second-column应该始终居中两个 svg，并且您应该只控制它。

body {
  background: #fff;
  color: #333333;
  margin: 0;
  font-family: open sans, Arial, sans-serif;
  font-size: 14px;
  overflow: hidden;
}

.turbotobias-hero-section-wrapper {
  height: 100vh;
  background: url(https://turbotobias.dk/wp-content/uploads/2019/07/Light-Above-clouds-HD-TurboTobias.jpg);
  background-size: cover;
  background-attachment: fixed;
  background-repeat: no-repeat;
}

.turbotobias-first-column {
  text-transform: uppercase;
  border-left: 10px solid #0082a4;
  padding: 20px 0 20px 20px;
  margin-top: 0;
  font-weight: 700;
}

@media (max-width: 799px) {
  .turbotobias-first-column {
    text-align: center;
  }
}

.turbotobias-fp-h1 {
  margin: 0 0 20px 0;
  font-size: calc(12px + 2vw);
  font-weight: 600;
  line-height: 90%;
}

.turbotobias-h1-enhanced {
  font-size: calc(24px + 2vw);
  font-weight: 900;
  line-height: 100%;
}

.turbotobias-h1-smaller {
  font-size: calc(17px + 1vw);
  font-weight: 600;
}


.turbotobias-sub-h1 {
  font-size: calc(14px + 0.5vw);
  font-weight: 400;
}

.turbotobias-sub-h1 {
  color: #303030;
}

.turbotobias-row {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  width: 80%;
  max-width: 1080px;
  height: 100vh;
  margin: auto;
}

.turbotobias-column {
  display: flex;
  flex-direction: column;
  flex-basis: 100%;
}

.turbotobias-second-column {
  display: flex;
  justify-content: center;
  max-width: 470px;
  margin: auto;
}

.turbotobias-rocket-img {
  bottom: 30%;
  width: 180px;
  height: auto;
  z-index: 11;
}

.turbotobias-smoke {
  position: absolute;
  bottom: 0;
  max-width: 470px;
  height: auto;
  z-index: 9;
}

.turbotobias-shake {
  animation: shake 2s infinite cubic-bezier(0.79, 0.04, 0.39, 0.81) both;
  transform: translate3d(0, 0, 0);
  backface-visibility: hidden;
  perspective: 1000px;
}

@media (max-width: 790px) {
  .turbotobias-rocket-img {
    z-index: 2;
    max-width: 420px;
  }
}

@keyframes shake {

  10%,
  90% {
    transform: translate3d(-1px, 0, 0);
  }

  20%,
  80% {
    transform: translate3d(1px, 0, 0);
  }

  30%,
  50%,
  70% {
    transform: translate3d(-2px, 0, 0);
  }

  40%,
  60% {
    transform: translate3d(2px, 0, 0);
  }
}


.turbotobias-divider-clouds {
  background-image: url(https://turbotobias.dk/wp-content/uploads/2019/07/clouds-divider.svg);
  background-size: cover;
  background-position: center top;
  bottom: 0;
  left: 0;
  height: 100px;
  position: absolute;
  width: 100%;
  z-index: 10;
}


@media (min-width: 800px) {
  .turbotobias-column {
    align-self: center;
    flex: 1
  }
}

@media (max-width: 980px) {
  .turbotobias-row {
    padding: 30px 0;
  }
}
 <div class='turbotobias-hero-section-wrapper'>
    <div class='turbotobias-row'>
      <div class='turbotobias-column'>
        <div class='turbotobias-first-column'>
          <h1 class="turbotobias-fp-h1">Vil du have
            <div class="turbotobias-h1-enhanced">raketfart</div>
            <div class="turbotobias-h1-smaller">på din hjemmeside?</div>
          </h1>
          <span class="turbotobias-sub-h1">Jeg ta'r din hjemmeside til skyerne!</span>
        </div>
      </div>
      <div class='turbotobias-column'>
        <div class='turbotobias-second-column'>
          <img src="https://turbotobias.dk/wp-content/uploads/2019/07/Turno-Tobias-Raketfart.svg" alt=""
            class="turbotobias-shake turbotobias-rocket-img">
          <img src="https://turbotobias.dk/wp-content/uploads/2019/07/TurboTobias-Blue-clouds.svg" alt=""
            class="turbotobias-smoke"></img>
        </div>
      </div>
      <div class="turbotobias-divider-clouds"></div>
    </div>
  </div>

推荐阅读