Question

我有2个div相邻浮动。在其中一个div中，当我减小浏览器窗口的大小时，我的图像会缩放（包括高度和宽度）。在另一个div中，我还有其他内容，但是只有在减小浏览器窗口的大小时，宽度才会缩放。我希望两个div始终保持相同的高度，即使它们正在缩放。这可能吗？

如果您想实时预览，请查看以下链接： http://jjberg.com/cipher/index.html

我知道部分问题是我实际上将cipherSide div的高度设置为500px。这是因为到目前为止，我还无法通过其他任何方式使此div的高度更接近pinupSide div的高度。

我试图将声明从pinupSide和pinUpGirl复制到cipherSide和verticalAlign div，但无济于事。这样只会将cipherSide div中的内容一直推到顶部。

<div class="container">

  <div class="pinupSide">
    <img class="pinUpGirl" src="images/pin_up_edited_x2.png" alt="Pin up girl">
  </div>

  <div class="cipherSide">
    <div class="verticalAlign">
      <h1> Dirty Diana </h1>
      <p>Dirty Diana wants to send dirty love messages to her husband, but she does not want Big Brother to know about it. Try out the tool I made for her!</p>
      <textarea rows="10" placeholder="Insert the text you want to cipher or decipher here!" required></textarea>
      <button id="cipherIT">Cipher It!</button>
      <button id="deCipher">Decipher!</button>
      <p id="newOne"></p>
    </div><!-- verticalAlign -->
  </div><!-- cipherSide -->

</div><!-- container -->

.container {
  max-width: 992px;
  height: 100%;
  margin: 0 auto;
  background: blue;
}
.pinupSide {
  background: green;
  width: 50%;
  height: 100%;
  float: left;
}
.pinUpGirl {
  max-width: 100%;
  max-height: 100%;
  background: black;
}
.cipherSide {
  position: relative;
  background: red;
  width: 50%;
  height: 500px;
  float: left;
}
.verticalAlign {
  position: absolute;
  top: 25%;
  height: 50%;
  width: 100%;
  background: yellow;
}

无论我如何缩放浏览器窗口的宽度，我都希望两个div始终具有相同的高度。

Answer 1

考虑到您的代码，我假设您希望两个元素始终具有相同的高度，但也具有相同的宽度。我还假设您希望图像在左侧元素内尽可能大而不会失真。是吗？

如果可以使用CSS网格，则可以使用由每个1fr的两列组成的网格来实现该布局，它们代表可用空间的一小部分。请参见以下代码：

<img>元素的width设置为100%，以使其在其父元素内尽可能大，并且其父元素的font-size设置为0删除图像下方的多余空间。

body {
  margin: 0;
  background-color: #3ff4fe;
}

.container {
  max-width: 992px;
  margin: auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
}

.image {
  background-color: black;
  font-size: 0;
}
.image img {
  width: 100%;
}

.text {
  background-color: red;
}

<div class="container">
  <div class="image">
    <img src="http://jjberg.com/cipher/images/pin_up_edited_x2.png" alt="Pin up girl">
  </div>
  <div class="text">
    Some text
  </div>
</div>

有帮助吗？

Answer 2

我第二次使用网格，就像奥古斯特说的那样。您也可以使用flex-box代替浮动和绝对定位。这是一种可能的实现。

您可能必须在图像上玩object-fit。或仅将贴图侧的背景设置为图像，然后通过背景属性更改位置。无论哪种方式，它都可以解决。

如果需要，还可以设置硬高和宽，而仅用弹性盒进行定位。

如果运行代码段，请确保全屏查看，因为它使用视口单位表示容器的高度。

* {
  box-sizing: border-box;
}

.container {
  padding: 2rem;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
}

.pinupSide,
.cipherSide {
  flex: 1 1;
  height: 100%;
  display: flex;
  justify-content: center;
  flex-direction: column;
}

.pinupSide {
  align-items: center;
  background: rgba(0,0,0,.6);
}

.pinUpGirl {
  width: 100%;
  object-fit: cover;
  object-position: 50% 50%;
}

.cipherSide {
  align-items: flex-start;
  background: rgba(231, 76, 60, 1)
}

.heading-group {
  background: rgba(241, 196, 15, 1);
}

textarea {
  width: 100%;
}

.button-group {
  width: 100%;
}

<div class="container">

  <div class="pinupSide">
    <img class="pinUpGirl" src="https://images.unsplash.com/photo-1530650819615-f14c8a735dd8?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1055&q=80" alt="Pin up girl">
  </div>

  <div class="cipherSide">
    <div class="heading-group">
      <h1> Dirty Diana </h1>
      <p>Dirty Diana wants to send dirty love messages to her husband, but she does not want Big Brother to know about it. Try out the tool I made for her!</p>
    </div>
    <textarea rows="10" placeholder="Insert the text you want to cipher or decipher here!" required></textarea>
    <div class="button-group">
      <button id="cipherIT">Cipher It!</button>
      <button id="deCipher">Decipher!</button>
    </div>
    <p id="newOne"></p>
  </div><!-- cipherSide -->

</div><!-- container -->

如何以与包含图片的div相同的方式缩放div的高度？

2 个答案: