Question

我正在处理一个包含2个div块的网页，两个块的宽度均为50％。左侧是文本，右侧是图像。这两个内容都位于div块的中间。有了CSS，我已经知道了当我调整浏览器窗口的大小时，图像的大小也随之调整了。但这只有在我调整宽度大小时才能这样做。如果仅调整高度，则图像尺寸不会改变。它只是保持不变。这会导致图像溢出。但是，至少在达到最小高度之前，我还要图像大小也对浏览器高度做出反应。

为了显示我的意思，我将右侧div块的背景色设置为白色，并调整了浏览器窗口的大小。全屏显示如下：

现在具有较小的窗口宽度：

并具有较小的窗口高度：

CSS代码

<style type="text/css">
   html, body {
      height: 100%;
      padding: 0;
      margin: 0;
      background-color: black;
   }

   .half-window-left {
      width: 50%;
      height: 100%;
      float: left;
      background-color: black;
      display: flex;
      justify-content: center;
   }

   .title {
      margin: 0 auto;
      align-self: center;
      font-family: "Optima", Arial, sans-serif;
      font-size: 60px;
      color: white;
   }

   .half-window-right {
      width: 50%;
      height: 100%;
      float: right;
      background-color: white;
      display: flex;
      justify-content: center;
      overflow: hidden;
   }

   .div-hexagon-center {
      left: -10%;
      width: 50%;
      height: auto;
      margin: 0 auto;
      align-self: center;
      position: relative;
      display: flex;
      object-fit: contain;
      background-color: black;
      overflow-y: hidden;
   }

   img {
      display: block;
      min-width: 30%;
      width: 100%;
      height: auto;
   }
</style>

HTML代码

<div class="half-window-left">
   <table class="title">
       <tr>
           <td><b style="color: #62B7F4;">W</b>ater</td>
       </tr>
       <tr><td>&nbsp;</td></tr>
       <tr>
           <td><b style="color: #31D994;">B</b>iosphere</td>
       </tr>
       <tr><td>&nbsp;</td></tr>
       <tr>
           <td><b style="color: #DAC081;">E</b>arth</td>
       </tr>
   </table>
</div>
<div class="half-window-right">
   <div class="div-hexagon-center">
       <img src="tripple-hexagon.png"/>
    </div>
</div>

我想由于进行了很多测试，我也弄砸了CSS代码。那里有数十种可能的解决方案，我尝试了其中的大多数方法，但都没有成功。

Answer 1

如果希望图像的高度响应屏幕的高度，则可以在图像上设置百分比高度，并设置最大和最小高度，以使图像永远不会变得太大或太小。像这样的东西：

html {
  height: 100%;
}
body {
  margin: 0;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.img {
  background-size: cover;
  background-image: url(https://www.w3schools.com/w3css/img_lights.jpg);
  width: 100%;
  max-width: 400px;
  min-width: 200px;
  height: 100%;
  max-height: 400px;
  min-height: 200px;
}

<div class='img'>

</div>

我使用了带有背景图像的div，因此我也可以使用将background-size css属性设置为“ cover”，但这取决于您是否需要。另外，您将需要使用百分比和最大值/最小值来满足您的需求

CSS通过更改窗口高度来调整图像高度

1 个答案: