Html 如何调整图像的高度？_Html_Css

Html 如何调整图像的高度？

html css

Html 如何调整图像的高度？,html,css,Html,Css,我正在尝试使用“style=”width:100%调整图像大小；高度：50%.”。如果我更改宽度，图像会调整大小。但是如果我更改高度，图像不会调整大小那么如何更改图像的高度呢多谢各位更改为高度：250px 您需要以像素为单位提供高度。此外，还需要一个put类，而不是内联css <!doctype html> <html> <head> </head> <body> <div id="slideshow_wrap

我正在尝试使用“style=”width:100%调整图像大小；高度：50%.”。如果我更改宽度，图像会调整大小。但是如果我更改高度，图像不会调整大小

那么如何更改图像的高度呢

多谢各位

更改为高度：250px

您需要以像素为单位提供高度。此外，还需要一个put类，而不是内联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（）函数来解决响应问题。请阅读此处

以下代码将起作用！！但您应该始终更喜欢将css html和所有javascript分开。也可以使用em或rem，而不仅仅是px。请在此处阅读更多关于它们的信息：

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

使用

对象匹配：包含作为内嵌式img标记。例如：
<img src='...' style='object-fit: contain'>

现在工作
高度变化
<!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>


html、正文、#幻灯片放映#包装、.slideshow容器、.mySlides{
身高：100%；
}
要使%
生效，您需要为父项添加一个固定高度

.parent{
高度：300px；
边框：1px纯红；
边缘底部：50px；
}
.h-50{
身高：50%；
}
如果要按百分比编辑图像高度，可以尝试将图像显示为背景
在此示例中，容器高度为200px
，图像大小显示为：宽度：100%（200px的100%）-高度：50%（200px的50%）

.slideshow容器{
显示：表格；
宽度：100%；
高度：200px；
边框：1px实心#ccc；
}
.slideshow容器.mySlides{
显示：表格单元格；
背景图像：url（“https://www.w3schools.com/howto/img_nature_wide.jpg");
背景大小：100%50%；
背景重复：无重复；
背景位置：居中；/*此属性是可选属性*/
}
如果图像已经占据了其父容器的整个宽度，或者100%，那么在更改图像高度时，图像宽度将不会对任何更改做出反应，因为图像已经满足其宽度属性值100%