Question

我遇到了一些棘手的代码，并想知道是否有人可以帮助我。我希望门和大象的图像的纵横比完全是3：2，我希望图像的高度完全相同。

目前，带门的div容器比大象容器大。在保持精确的3：2图像宽高比的同时，这些尺寸如何才能相同？

非常感谢您的帮助！

＆＃13;

#bg {
  width: 100%;
  background: yellow;
  display: table;
}
#window-container {
  width: 10%;
  background: orange;
  display: block;
  float: left;
}
img {
  width: 100%;
  height: auto;
  display: block;
}
#text-img {
  width: 100%;
  height: auto;
  background: url('https://cml.sad.ukrd.com/image/638038.png');
}
#text-wrap {
  background: lightblue;
  padding: 10px;
}

＆＃13;

<div id='bg'>
  <div id='window-container'>
    <img src='http://www.sickchirpse.com/wp-content/uploads/2017/08/Elephant.jpg'>
    <!--<div id='test-img'></div>-->
    <div id='text-wrap'>text goess here</div>
  </div>

  <div id='window-container'>
    <img src='https://images.homedepot-static.com/productImages/7e02e385-820f-42de-85fc-8b3b4b6ec15c/svn/tangerine-mmi-door-doors-without-glass-z024086r-64_1000.jpg'>
    <!--<div id='test-img'></div>-->
    <div id='text-wrap'>text goes here</div>
  </div>
</div>

＆＃13;

Answer 1

这并不容易，也许它不完全是你想要的，但请看一看。我认为3：2意味着100％：66％...所以我这样做了：

＆＃13;

#bg {
  width: 100%;
  background: yellow;
  display: flex;
}
#window-container {
  display: flex;
  float: left;
}
img{
    background: orange;
    width: 100%;
    max-height: 66%;
    min-height: 66%;
    margin-bottom: -4px;
}
.content{
  width: 33vw;
  height: 33vw; 
  padding: 0;
}
#text-img {
  width: 100%;
  height: auto;
  background: url('https://cml.sad.ukrd.com/image/638038.png');
}
#text-wrap {
    background: lightblue;
    display: inline-flex;
    width: 100%;
    height: 34%;
    overflow: auto;
}
#text-wrap::-webkit-scrollbar-track{
background: #000;
}
#text-wrap::-webkit-scrollbar {
width: 8px;
}
#text-wrap::-webkit-scrollbar-thumb {
background: #fff;
border: 1px solid #aaa;
}

＆＃13;

<div id='bg'>
  <div id='window-container'>
    <div class="content">
      <img src='http://www.sickchirpse.com/wp-content/uploads/2017/08/Elephant.jpg'>
      <div id='text-wrap'>
        <span style="padding:10px">text goes here</span></div>
    </div>
  </div>

  <div id='window-container'>
    <div class="content">
      <img src='https://images.homedepot-static.com/productImages/7e02e385-820f-42de-85fc-8b3b4b6ec15c/svn/tangerine-mmi-door-doors-without-glass-z024086r-64_1000.jpg'>    
      <div id='text-wrap'>
        <span style="padding:10px">text goes here text goes heretext goes heretext goes heretext goes heretext goes heretext goes heretext goes heretext goes heretext goes heretext goes heretext goes heretext goes heretext goes heretext goes heretext goes heretext goes heretext goes heretext goes heretext goes heretext goes heretext goes heretext goes heretext goes heretext goes heretext goes heretext goes here</span></div>     
      </div>
    </div>
</div>

＆＃13;

另外，请看一下：Maintain the aspect ratio of a div with CSS

EDITTED 可根据需要添加滚动条

将多个图像的纵横比保持在相同的div

1 个答案: