gpt4 book ai didi

HTML Bootstrap 将图像放入行内的列中

转载 作者:行者123 更新时间:2023-11-28 02:52:17 26 4
gpt4 key购买 nike

我正在使用带有行结构的容器来制作标题。我希望最左边的列有一个图像。但是,每当我添加图像时,它都会以全尺寸添加。我希望它限于该列的设定大小。

这是我当前的 HTML 代码:

.logo {
max-width: 100%;
max-height: 100%;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="jumbotron" >
<div class="container">
<div class="row">
<div class="col-xs-1">
<div class="image-container">
<center>
<img src="https://i.pinimg.com/originals/fb/76/5b/fb765b8752d50de50cfa15203f9a7acd.png" alt="test" class="logo">
</center>
</div>
</div>

<div class="col-xs-10">
<h2><center>TEST HEADER</center></h2>
<h4><center>TEST SUBTEXT</center></h4>
</div>

<div class="col-xs-1">
<center>wowow</center>
</div>

</div>
</div>
</div>

我尝试在我的 CSS 文件中添加,但它没有改变任何东西。

我怎样才能使图像遵循容器的设置大小?

最佳答案

尝试添加以下 css:

.image-container .logo{
宽度:100%;
}

关于HTML Bootstrap 将图像放入行内的列中,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/46617308/

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