调整 col-md-12 中的图像大小 class

Question

我创建了一个响应式网站，但有些图片没有按照我的要求调整大小。
请参阅此屏幕截图：

#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>

Answer 1

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

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

然后图像的宽度应根据您的列调整大小。

调整 col-md-12 中的图像大小 class

resizes image inside col-md-12 class

html

css

responsiveness

bootstrap-4