gpt4 book ai didi

HTML/CSS 宽度/高度不会改变?

转载 作者:行者123 更新时间:2023-11-27 23:00:24 27 4
gpt4 key购买 nike

<!DOCTYPE html>
<html>

<head>
<title>HTML, CSS and JavaScript demo</title>

<link rel="stylesheet" href="profilepage.css">

</head>


<body>
<!-- Start your code here -->

<div class="profile-box">
<div class="bg">
<img src="https://www.capisol.co.za/wp-content/uploads/gaussian-blur-orange-367347-background-wallpapers.jpg" />
</div>

</div>

<!-- End your code here -->
</body>

</html>

个人资料页面.css

.bg {
width: 100%;
height: 10%;
}

结果是这样的:在我的页面上

enter image description here

我想要的是覆盖整个第一行的宽度和页面的 10% 的高度。即

enter image description here

黑线结束 img 的地方

我一直在玩宽度和高度,但没有任何效果。当我改变宽度时,会出现一些大的东西。即使我让宽度变小。我不知道为什么宽度会改变高度。我究竟做错了什么?

最佳答案

百分比高度指的是直系父级的高度。如果未设置父高度,CSS 将不执行任何操作。您可以从 body 标签向下层叠 100% 的高度设置,也可以将一些固定值应用于图像标签的直接父级。

固定值(使用 View 高度直接指代 body 标签的高度)

<div style="height: 10vh;">
<img style="max-height: 100%;" src="https://www.capisol.co.za/wp-content/uploads/gaussian-blur-orange-367347-background-wallpapers.jpg" />
</div>

层叠高度

.bg {
width: 100%;
height: 10%;
}

body {
height: 100%;
}

.profile-box {
height: 100%;
}

html {
height: 100%;
}

img {
max-height: 100%;
width: 100%;
}

在这两种情况下,我们都必须通过父类限制图像高度,否则任何更改都不会生效。

我使用了这些来源: How to make a div 100% height of the browser windowMake an image to fit its parent dimensions

关于HTML/CSS 宽度/高度不会改变?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/59022714/

27 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com