如何调整图像的高度？ [复制]
Posted
技术标签:
【中文标题】如何调整图像的高度？ [复制]【英文标题】：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% 【参考方案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>【讨论】：
以上是关于如何调整图像的高度？ [复制]的主要内容，如果未能解决你的问题，请参考以下文章