Question

我试图让我的最终结果看起来像这样https://www.youtube.com/watch?v=SRVtplLrkxk 我们有 3 个 divs 水平排列。图像 div 位于 3 div 的中心，而 2 div 的其余部分仅包含随机字母。我还希望我的图像在调整大小时保持其纵横比。使用任何 JavaScript 都可以实现灵活性吗？

这是我目前所拥有的：

iconv

我的 scss：

<div class="container">
  <div class="text-block text-block-one">
    <div class="text-wrapper">
      <h1>Hello there</h1>
      <h3>et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat  </h3>
    </div>
  </div>
  <div class="image-block">
    <div class="image-container">
      <img src="https://via.placeholder.com/450x750">
    </div>
  </div>
  <div class="text-block text-block-two">
    <div class="text-wrapper">
      <h3>et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat </h3>
    </div>
  </div>
</div>

Answer 1

你的CSS写成SASS（应该解释和渲染CSS，但超出了这里的范围），我用实际的CSS结构写了你的CSS并将图片容器的宽度限制为450px，现在看起来对我很好：

body, html {
  margin: 0;
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  background: #efefef;
}
h1,h2,h3 {
  margin: 0;
}
h1 {
  margin-bottom: 20px;
}
img{
  max-width:100%;
  display: block;
  margin: 0 auto;
  object-fit: contain;
}
* {
  box-sizing: border-box;
}  
   
.container {
  display: flex;
  position: relative;
  width: 100%;
  margin: 0px auto;
}      
.text-block {
    width: 37.645448%;
    background: #e3e3e3;
    padding-top: 250px;        
}
.text-wrapper {
    margin: 0 10%;
    overflow: auto;
}
.image-container {
  max-width: 450px;    
}

在此处查看结果： https://jsfiddle.net/ypt1vfs3/

希望这就是你想要完成的。

Answer 2

尝试使用此 CSS：

  .container {
    width: 100%;
    height: auto;
    display: flex;
    flex-direction: row;
  }
 .image-block{
    width: 33%;
    height: auto;
  }
  img{
    height: 100%;
    width: 100%;
  }
  .text-block {
    width: 33%;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    margin: 0 auto;
  }
  .text-wrapper {
    width: 100%;
    height: auto;
  }

  h3 {
    margin: 0 25px;
  }

与视频相同

使 3 div 尽可能地对视频做出反应

2 个答案: