Question

所以我有一个简单的小域用文件服务器。我希望主页只是一个图像。我还希望该图像占据浏览器窗口高度的一半，所以我用内嵌样式写了一些html。是的，我是这方面的初学者，所以我现在所知道的只是基本的html和css。

<img src="fruit.png" alt="a bowl of fruit" style="max-width:auto;max-height:50%;">

我试了一下，图像以全分辨率快乐地显示，完全忽略了我的造型，所以我玩了一点，我最终发现了像

这样的东西

<img src="fruit.png" alt="a bowl of fruit" style="max-width:auto;max-height:500px;">

和

<img src="fruit.png" alt="a bowl of fruit" style="width:50%;">

工作得很好，但我使用百分比的原因是因为我希望根据浏览器窗口大小来缩放大小。所以我试图找出我在这里做错了什么，或者是否有一些错误，或者我只是一个白痴而且修复很明显。

Answer 1

img必须拥有绝对的位置！否则，最大高度不会做任何事情。此外，价值＆＃34; auto＆＃34;是不允许的。

<style>
img {
    position: absolute;
    max-height: 50%;
}
</style>
<img src="fruit.png" alt="a bowl of fruit"/>

或

<img src="fruit.png" alt="a bowl of fruit" style="position: absolute; max-height: 50%;"/>

Answer 2

首先，您应该在链接文件中使用CSS而不是内联，就像您现在所做的那样。这使得管理变更变得异常简单。看看这个最小的例子：

<!DOCTYPE html>
<html lang="en">
  <head>
    <title></title>
    <meta charset="UTF-8">
    <link href="style.css" rel="stylesheet">
  </head>
  <body>
    <img src="fruit.png" alt="a bowl of fruit">
  </body>
</html>

style.css文件将包含您的所有样式，例如：

img {
  max-width: auto;
  max-height: 500px;
}

小页面的替代方法是在<style>标记内编写CSS，如下所示：

<!DOCTYPE html>
<html lang="en">
  <head>
    <title></title>
    <meta charset="UTF-8">
    <style>
      img {
        max-width: auto;
        max-height: 500px;
      }
    </style>
  </head>
  <body>
    <img src="fruit.png" alt="a bowl of fruit">
  </body>
</html>

更好的是，使用类：

<!DOCTYPE html>
<html lang="en">
  <head>
    <title></title>
    <meta charset="UTF-8">
    <style>
      .image {
        max-width: auto;
        max-height: 500px;
      }
    </style>
  </head>
  <body>
    <img class="image" src="fruit.png" alt="a bowl of fruit">
  </body>
</html>

关于你的问题，我假设你想要的是用图像动态填充浏览器窗口的一半。这可以通过一个名为viewport height (vh)的新单位实现。例如：

    <!DOCTYPE html>
    <html lang="en">
      <head>
        <title></title>
        <meta charset="UTF-8">
        <style>
          .half-viewport {
            height: 50vh;
            width: auto;
          }
        </style>
      </head>
      <body>
        <img class="half-viewport" src="http://lorempixel.com/1280/800/" alt="image">
      </body>
    </html>

html / css无法用百分比更改图像高度

2 个答案: