为什么当我试图用CSS改变<div>的高度时，它的高度没有变化？
为什么当我试图用CSS改变<div>的高度时，它的高度没有变化？
提问于 2022-07-21 03:53:16
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="{{ url_for('static', filename='index.css') }}">
</head>
<body>
{% with messages = get_flashed_messages() %}
{% if messages %}
{% for message in messages %}
<div class="flash-msg">{{ message }}</div>
{% endfor %}
{% endif %}
{% endwith %}
<div id="first">
<input type="text" id="searchBar" name="searchBar">
{% if current_user.is_authenticated %}
<a href="{{ url_for('user', username=current_user.username) }}"><img src="{{ url_for('static', filename='profile-icon.png') }}" alt="" id="profileIcon"></a>
<a href="{{ url_for('logout') }}" id="logout-btn">Logout</a>
{% else %}
<a href="{{ url_for('login') }}"><img src="{{ url_for('static', filename='profile-icon.png') }}" alt="" id="profileIcon"></a>
{% endif %}
</div>
<div id="content-1">
{% for post in posts %}
{% if loop.changed(post.post_name) %}
<div class="c-i">
<a href="{{ url_for('read', post_name=post.post_name) }}">
<img src="{{ url_for('static', filename='images/'+post.title) }}" alt="">
</a>
</div>
{% endif %}
{% endfor %}
</div>
</body>
</html> 这就是我遇到问题的模板
body {
background-color: rgba(247,247,247,255);
}
#first {
display: flex;
flex-direction: row;
height: 5vw;
border: 10px solid black;
justify-content: center;
}
#searchBar {
height: 59%;
width: 50%;
margin-top: 0.7%;
border-radius: 5px;
padding-left: 10px;
}
#profileIcon {
position: absolute;
right: 15px;
max-height: 5vw;
}
#logout-btn {
position: absolute;
right: 120px;
max-height: 5vw;
margin-top: 1.75%;
}
#content-1 {
display: flex;
flex-direction: row;
flex-wrap: wrap;
}
.c-i {
max-height: 1px;
display: block;
margin-left: 45px;
margin-top: 35px;
}这是该模板的CSS代码。
我试着用"c-i“类来改变高度，但它并没有改变。它只是在标签下面的图像中占据了图像的尺寸。我希望它有一个最大高度的几个像素暂时，但高度或最大高度属性似乎没有任何影响。
回答 2
Stack Overflow用户
发布于 2022-07-21 04:03:15
您的元素高度高于css中给定的高度。如果您想应用您的身高，您需要在您的类中添加overflow:'hidden'。
Stack Overflow用户
发布于 2022-07-21 04:51:04
您需要从两个角度来研究这个问题，div是如何块元素的，图像默认大小为https://developer.mozilla.org/en-US/docs/Web/HTML/Block-level_elements块级元素占据父元素(容器)的整个水平空间，垂直空间等于其内容的高度，从而创建了一个“块”。对于图像而言，内部大小具有相同的含义--如果没有应用https://developer.mozilla.org/en-US/docs/Glossary/Intrinsic_Size来更改呈现，则显示图像的大小。默认情况下，假设图像具有"1x“像素密度(1个设备像素=1个CSS像素)，因此内部大小只是像素的高度和宽度。
在默认情况下，您的div将根据其内容进行缩放，默认情况下，任何图像都显示在其高度/宽度的100%。因此，即使您在包含的div上设置了最大高度，默认情况下您的图像大小为100%，正如@Praveen正确提到的那样，容器div实际上已经溢出。决议？将您的图像设置为内联块，并将其最大高度设置为继承，因此它从其父节点继承它。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/73060514
复制相关文章
相似问题
腾讯云开发者
