时间戳

首页 > 解决方案 > div/背景图片的高度展开，不隐藏在下面的div下；当宽度超过 1776px

css - div/背景图片的高度展开，不隐藏在下面的div下；当宽度超过 1776px

问题描述

我刚刚开始使用这个应用程序，并且遇到了（对我来说）令人困惑的障碍......

我希望 div 的高度可以调整/扩展并保持图片的纵横比，将下面的 div 进一步向下推以适应。我试过 height: auto, overflow: visible 无济于事。

就像我提到的......一切都很好，直到网页的宽度超过 1776px，然后随着背景图像的扩展，图像的底部开始消失在它下面的 div 后面。

我已经注释掉了一个媒体查询，因为过渡是难看的。希望它是一件容易的事，并会感谢任何帮助；谢谢你。

CSS

JS
JS

一切都是洁食的。。
一切都是洁食的。。

直到宽度达到 1776px
直到宽度达到 1776px

CSS: 
.App {
  text-align: center;
}

.landing {
  background: url("./images/WHproofbackground.png");
  background-repeat: no-repeat;
  background-size: cover;
  height: 95vh;
  object-fit: contain;
}
/* @media only screen and (max-width: 1776px) {
  .landing {
    height: 120vw;
  }
} */

.cabin-background {
}

.welcome {
  font-size: 5vw;
}

.second-base {
  height: 100em;
  background-color: #957274;
}

js:

import React from "react";
import "./App.css";

function App() {
  return (
    <div className="App">
      <header className="landing">
        <div className="cabin-background">
          <p className="welcome">Welcome Home,</p>
        </div>
      </header>

      <div className="second-base">hello</div>
    </div>
  );
}

export default App;

标签： cssreactjs

解决方案

想通了，还是谢谢

height: calc(0.664 * 100vw);

推荐阅读