如何拥有固定的div高度，而不考虑其中的图像高度
如何拥有固定的div高度，而不考虑其中的图像高度
提问于 2020-02-18 21:01:35
我有一排有三列的。我想在每个列的div上有一个相同高度的图像，而不考虑每个div中的图像大小。
我想在div中调整图像的大小。但是我得到了不同大小的div，因为myImage1.png、myImage2.png和myImage3.png的图像大小是不同的。
这是因为我在“bg”类中有固定的填充。有人能帮我解决这个问题吗？下面是我的HTML和CSS代码。
<div class="row IDE_container">
<div class="col-lg-3 col-md-3 col-sm-3">
<div class="bg">
<img src="myImage1.png" class="IDE_div" />
</div>
</div>
<div class="col-lg-2 col-md-2 col-sm-2">
<div class="circle_bg circle_bg_sm">
<img src="myImage2.png" class="IDE_div" />
</div>
</div>
<div class="col-lg-3 col-md-3 col-sm-3">
<div class="circle_bg">
<img src="myImage3.png" class="IDE_div" />
</div>
</div>
</div>
.bg{
background-color: #ededed;
border-radius: 100%;
text-align: center;
padding: 35% 5%;
width: max-content;
max-width: 100%;
box-shadow: 0 0 3px 1px #DDD;
}
.IDE_div {
display: inline-block;
position: relative;
width: 100%;
height: 100%;
}
.IDE_container {
display: flex;
align-items: baseline;
}回答 2
Stack Overflow用户
发布于 2020-02-18 21:19:51
对于各种类型的图像，可以使用object-fit
属性。
如下所示添加CSS：
.IDE_div{
width: 100%;
object-fit: cover;
height: 300px; /* only if you want fixed height */
}
<div class="col-3">
<div class="circle_bg">
<img src="myImage3.png" class="IDE_div" />
</div>
</div>您可以在这里找到有关object-fit和object-position的详细信息：https://css-tricks.com/on-object-fit-and-object-position/
Stack Overflow用户
发布于 2020-02-18 21:16:14
您需要在包含图像的div上设置一个高度或最大高度，否则它们将适应其内容(图像)的高度。由于您已经将图像设置为占据100%的宽度和高度，并且没有限制它们的父级，因此它们将基于原始图像大小尽可能大。
所以，举个例子：
.IDE_container {
display: flex;
align-items: baseline;
div.col-3 {
div {
height: 200px;
.IDE_div {
display: inline-block;
position: relative;
width: 100%;
height: 100%;
&::before {
content: "";
position: absolute;
top: 50%;
left: 50%;
width: var(--val);
padding-bottom: var(--val);
transform: translate(-50%, -50%);
z-index: -1;
border-radius: 50%;
}
}
}
}
}你可以给所有的容器赋予相同的类(例如，fixed-height-bg)，以使它们更容易样式化。
还请注意:您不需要为不同屏幕大小的列提供单独的类，因为它们总是占据相同的比例。所以，你可以直接使用
<div class="col-3">
<div class="circle_bg">
<img src="myImage3.png" class="IDE_div" />
</div>
</div>编辑后添加:如果您希望图像保持其比例，则需要将css更改为如下所示：
img {
height: 100%; /* height of the parent container if specified, or of the image itself */
width: auto; /* will maintain the proportions of the image */
}如果您希望图像采用全宽，也可以将这些值切换为height: auto；width: 100%；。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/60281524
复制相关文章
相似问题
腾讯云开发者
