如何使图像与其容器高度相同并具有视差效果？

Question

I want the section of the website to look like this:我希望网站的部分看起来像这样：

But right now mine looks like this:但现在我的看起来像这样：

How can I increase the height of the image on the right to cover the full height of the about-sec container?如何增加右侧图像的高度以覆盖about-sec容器的整个高度？ And how can I then increase the height of the about-sec container so that the whole image can be seen to the right as shown in the example above while keeping the parallax effect?然后如何增加about-sec容器的高度，以便在保持视差效果的同时，如上例所示在右侧可以看到整个图像？

Here is my CSS code:这是我的 CSS 代码：

.about-sec {
  width: 100%;
  /* display: flex; */
  flex-direction: column;
  text-align: center;
  justify-content: center;
  background-color: white;
  padding: 2% 0.5% 10% 0.5%;
  overflow: hidden;
}

.left-half {
    width: 50%;
    position: abosulte;
    height: 100%;
    left: 0px;
    /*  */

}

.right-half {
    position: absolute;
    background-image: url("aboutSectionImage.jpg");
    background-color: #cccccc;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    background-attachment: fixed;
    width: 50%;
    right: 0px;
    height: 6em;
    display: flex;

    /* padding-left: 10%;
    padding-top: 10%; */
}

Here is my React/HTML code:这是我的反应/HTML 代码：

import React from 'react';
import './aboutSection.css';


class AboutSection extends React.Component {

    render() { 
        return (
            <div className="about-sec" >
               <div className="left-half">
                    asd
               </div>
               <div className="right-half">
                   Hi
                   <br></br>
                   df
               </div>
               
            </div>
        );
    }
}
 
export default AboutSection;

EDIT编辑

The image to the right of the screen works and now I'm trying to add a parallax scrolling effect.屏幕右侧的图像有效，现在我正在尝试添加视差滚动效果。 The effect works for me but the I'm not sure how to make the image only take up half the page (right side).该效果对我有用，但我不确定如何使图像仅占页面的一半（右侧）。 When I set background-size: cover;当我设置background-size: cover; it should take up the whole size of the div, in this case, the right-half div.它应该占据 div 的整个大小，在这种情况下，是right-half div。 For some reason the image is super huge and it looks like this:由于某种原因，图像非常巨大，看起来像这样：

Does anyone know why this happens?有谁知道为什么会这样？

CSS code: CSS 代码：

 *{
    box-sizing: border-box;
  }
  .about-sec{
    display: flex;
    flex-direction: row;
    height: 90vh;
  }
  .left-half{
    height: 100%;
    width: 50%;
    background: white;
  }
  .right-half{
    height: 100%;
    width: 50%;
    background-image: url("aboutSectionImage.jpg");
    background-color: #cccccc;
    background-position: right;
    background-repeat: no-repeat;
    background-size: cover;
    background-attachment: fixed;
}

Answer 1

Check the below css code for your reference.检查下面的css代码供您参考。 You really don't need the position: absolute;你真的不需要position: absolute; on your right-half class.在你的right-half class。 You should only use positioning to do minute changes and you should not use it to do your layout.你应该只使用positioning来做微小的改变，你不应该用它来做你的布局。 It seems that you are also not familiar on how flexbox works check this link to familiarize yourself with it.您似乎也不熟悉flexbox工作原理，请查看此链接以熟悉它。

 *{ box-sizing: border-box; }.about-sec{ display: flex; flex-direction: row; height: 50vh; }.left-half{ height: 100%; width: 50%; background: blue; }.right-half{ height: 100%; width: 50%; background: red; {

 <html> <body> <div class="about-sec"> <div class="left-half"> left </div> <div class="right-half"> right </div> </div> </body> </html>

Answer 2

Here is a similar example you can update class and dom structure, here I use bootstrap 4.6+这是一个类似的示例，您可以更新 class 和 dom 结构，这里我使用bootstrap 4.6+

 .fdb-block { height: calc(100vh - 200px); width: 100%; }.col-fill-right { background-image: url("https://picsum.photos/1900/1000"); background-size: cover; background-repeat: no-repeat; position: absolute; right: 0; bottom: 0; top: 0; height: 100%; width: 50%; } @media all and (max-width:768px) {.col-fill-right { display: none; } }

 <link href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/css/bootstrap.min.css" rel="stylesheet" /> <section class="fdb-block"> <div class="col-fill-right"> </div> <div class="container py-5"> <div class="row"> <div class="col-12 col-md-5 text-center"> <h1>Froala Blocks</h1> <p class="lead">Far far away, behind the word mountains, far from the countries Vokalia and Consonantia, there live the blind texts.</p> <p class="mt-4 mb-5"><a class="btn btn-secondary" href="https://www.froala.com">Button</a></p> <p>Follow us on</p> <p> <a href="https://www.froala.com" class="mx-2 text-secondary"><i class="fab fa-twitter" aria-hidden="true"></i></a> <a href="https://www.froala.com" class="mx-2 text-secondary"><i class="fab fa-facebook" aria-hidden="true"></i></a> <a href="https://www.froala.com" class="mx-2 text-secondary"><i class="fab fa-instagram" aria-hidden="true"></i></a> <a href="https://www.froala.com" class="mx-2 text-secondary"><i class="fab fa-pinterest" aria-hidden="true"></i></a> <a href="https://www.froala.com" class="mx-2 text-secondary"><i class="fab fa-google" aria-hidden="true"></i></a> </p> </div> </div> </div> </section>

如何使图像与其容器高度相同并具有视差效果？

问题描述

2 个解决方案

解决方案1
1 已采纳 2022-01-11 03:22:24

解决方案2
1 2022-01-11 03:42:03

如何使图像与其容器高度相同并具有视差效果？

问题描述

2 个解决方案

解决方案1 1 已采纳 2022-01-11 03:22:24

解决方案2 1 2022-01-11 03:42:03

解决方案1
1 已采纳 2022-01-11 03:22:24

解决方案2
1 2022-01-11 03:42:03