gpt4 book ai didi

css - Bootstrap + CSS : How to set a div's height according to its width?

转载 作者:行者123 更新时间:2023-11-28 08:36:35 24 4
gpt4 key购买 nike

<分区>

我想从这里开始 enter image description here

为此

enter image description here

在第一个中,img响应广泛。它的width设置为 100%,使用 Bootstrap 的 .img-responsive .

但是,为了在第二张图片中达到预期的效果,我们必须省略部分图像'。为此,一种方法是将 img 的容器设置为固定的宽度和高度,代码如下:

<div class="col-md-9">
<div class="col-md-4 img-container">
<img src="" class="img-responsive">
</div>
<div class="col-md-4"></div>
<div class="col-md-4"></div>
</div>

(要使用以下方法,请删除上面的“img-responsive”助手。)

.img-container{
height: 148px;
width: 148px;
img{
max-height: 100%;
max-width: 100%;
vertical-align: middle;
}
}

但是,使用 Bootstrap 的网格来定义每个 <div>的宽度。,我不想将它的宽度和高度设置为固定值。也就是说,我想要每个 <img>或其容器根据 col-md-* 缩放.

如果不使用固定宽度和高度,我该怎么做?或者简单的说,根据宽度来设置高度? (或者只是如何制作一个正方形)

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