代码之家 › 专栏 › 技术社区 › Ricardo Roa

在col-md-12类中调整图像大小

responsiveness bootstrap-4 css html

0

Ricardo Roa · 技术社区 · 8 年前

我创建了一个快速响应的网站,但其中一些图片并没有按照我的要求调整大小。

screenshot

#img1 {
    width: 250px;
    height: auto;
    margin: auto;
    display: block;
    background-size: 20%;
}

<div class="row">

    <div class="col-md-6" id="mision">
        <img src="imagenes/MISION.png" id="img1">
    </div>

    <div class="col-md-6" id="vision">
        <img src="imagenes/VISION.png" id="img2">
    </div>

    <div class="col-md-12" id="servicios">
        <img src="imagenes/SERVICIOS.png" id="img3">
    </div>

</div>

1 回复 | 直到 8 年前

1

0

TripWire 8 年前

如果您在CSS中为图像元素使用固定宽度,请尝试更改为百分比宽度,例如:

#img1{
    width: 80%;
    height: auto;
    margin: auto;
    display: block;
    background-size:20%;
}

然后图像的宽度应该随着列的大小而调整。

推荐文章

Alex Heslop · Delphi:实时运行时滚动

8 年前

Ricardo Roa · 在col-md-12类中调整图像大小

8 年前

Jonny DOe · 为仅div css设置相同的高度和响应能力

8 年前

Lloyd · 具体化CSS如何使行列高度相同?

9 年前

Matt user000001 · css菜单在移动设备上消失

10 年前