如何调整图像的高度？ [复制]答案

【问题标题】：How do I resize the height of the image? [duplicate]如何调整图像的高度？ [复制]
【发布时间】：2020-05-02 22:58:23
【问题描述】：

我正在尝试使用 "style="width: 100%; 调整图像大小； height: 50%"。如果我改变宽度，图像会调整大小。但如果我改变高度，图像不会调整大小。

那么如何改变图片的高度呢？

谢谢。

<!doctype html>
<html>

<head>
</head>

<body>
  <div id="slideshow_wrap">
    <!-- slide show container -->
    <div class="slideshow-container">
      <div class="mySlides fade-slide">
        <img src="https://www.w3schools.com/howto/img_nature_wide.jpg" style="width:100%; height:100%"> <!-- changing to height:50% does not affect -->
      </div>
    </div>
</body>

</html>

【问题讨论】：

如果图像已经占据了其父容器的整个宽度或 100%，那么在更改图像高度时，图像宽度不会对任何更改做出反应，因为图像已经满足其宽度属性值，即100%

标签： html css

【解决方案1】：

如果您想按百分比编辑图像高度，可以尝试将图像显示为背景。

在本例中，容器高度为200px，图像大小显示为：宽度：100%（200 像素的 100%）-高度：50%（200 像素的 50%）。

.slideshow-container {
  display: table;
  width: 100%;
  height: 200px;
  border: 1px solid #ccc;
}

.slideshow-container .mySlides {
  display: table-cell;
  background-image: url("https://www.w3schools.com/howto/img_nature_wide.jpg");
  background-size: 100% 50%;
  background-repeat: no-repeat;
  background-position: center; /* this property is an optional*/
}

<div id="slideshow_wrap">
  <!-- slide show container -->
  <div class="slideshow-container">
    <div class="mySlides fade-slide">
  </div>
</div>

【讨论】：

【解决方案2】：

要使% 生效，您需要为parent 添加固定高度

.parent {
  height: 300px;
  border: 1px solid red;
  margin-bottom: 50px;
}

.h-50 {
  height: 50%;
}

<div class="mySlides fade-slide parent">
  <img src="https://www.w3schools.com/howto/img_nature_wide.jpg" class="h-50">
</div>

【讨论】：

【解决方案3】：

现在工作 <img src="https://www.w3schools.com/howto/img_nature_wide.jpg" style="width:100%; height:100%"> 高度变化。

<!doctype html>
<html>
    <head>
        <style type="text/css">
            html, body, #slideshow_wrap, .slideshow-container, .mySlides{
                height: 100%;
            }
        </style>
    </head>

    <body>
        <div id="slideshow_wrap">
            <!-- slide show container -->
            <div class="slideshow-container">
                <div class="mySlides fade-slide">
                    <img src="https://www.w3schools.com/howto/img_nature_wide.jpg" style="width:100%; height:100%"> <!-- changing to height:50% does not affect -->
                </div>
            </div>
        </div>
    </body>
</html>

【讨论】：

【解决方案4】：

使用 object-fit: contain 作为内联样式的 img 标签。喜欢：

<img src='...' style='object-fit: contain'>

【讨论】：

【解决方案5】：

您可以尝试查找更多关于为什么身高百分比不起作用！在这里

CSS – why doesn’t percentage height work?

Percentage Height HTML 5/CSS

【讨论】：

【解决方案6】：

下面的代码可以工作！！但是您应该始终更喜欢将您的 css html 和所有 javascript 分开。此外，您可以使用 em 或 rem 而不仅仅是 px 。在此处阅读有关它们的更多信息：https://engageinteractive.co.uk/blog/em-vs-rem-vs-px

<!doctype html>
<html>

<head>
</head>

<body>
  <div id="slideshow_wrap">
    <!-- slide show container -->
    <div class="slideshow-container">
      <div class="mySlides fade-slide">
        <img src="https://www.w3schools.com/howto/img_nature_wide.jpg" style="width:100%; height:300px"> <!-- changing to height:50% does not affect -->
      </div>
    </div>
</body>

</html>

【讨论】：

【解决方案7】：

您需要以像素为单位提供高度。而且你还需要一个类而不是内联css。

<!doctype html>
<html>

<head>
</head>

<body>
  <div id="slideshow_wrap">
    <!-- slide show container -->
    <div class="slideshow-container">
      <div class="mySlides fade-slide">
        <img src="https://www.w3schools.com/howto/img_nature_wide.jpg" style="width:100%; height:100px"> <!-- changing to height:50% does not affect -->
      </div>
    </div>
</body>

</html>

您应该尝试使用 calc() 函数来解决响应问题。请阅读此处https://css-tricks.com/a-couple-of-use-cases-for-calc/

【讨论】：

【解决方案8】：

更改为高度：250px

<!doctype html>
<html>

<head>
</head>

<body>
  <div id="slideshow_wrap">
    <!-- slide show container -->
    <div class="slideshow-container">
      <div class="mySlides fade-slide">
        <img src="https://www.w3schools.com/howto/img_nature_wide.jpg" style="width:100%; height:150px"> <!-- changing to height:250px does not affect -->
      </div>
    </div>
</body>

</html>

【讨论】：