html - 如何让一组图片响应

Question

我有自己的图片显示方式，但我无法让它们响应。我需要做什么才能使这组图片具有响应性？目前的结果是图片变瘦了。这是我在下面提供的代码的结果:

.hall-way {
    /*background-color:red;*/
    height: 400px;
}

.hall-way img {
    height: 100%;
    width: 100%;
    padding: 0px 0px 15px 0px;
}

.espaco-office {
    height: 400px;
    padding: 0px;
}

.espaco-office img {
    height: 100%;
    width: 100%;
    padding: 0px 0px 15px 0px;  
}

.espaco-gallery img {
    height: 100%;
    width: 100%;
    padding: 0px 0px 15px;
}

.espaco-gallery {
    height: 300px;
    padding: 0px;
}

.espaco-stand img {
    height: 100%;
    width: 100%;
    padding: 0px 0px 15px;
}

.espaco-stand{
    height: 200px;
    padding: 0px;
}

.espaco-lounge {
    height: 500px;
    padding: 0px;
}

.espaco-lounge img {
    height: 100%;
    width: 100%;
    padding: 0px 0px 15px;
}

.espaco-waiting-room {
    height: 600px;
    padding: 0px;
    width: 100%;
}


.espaco-waiting-room img {
    height: 100%;
    width: 100%;
    padding: 0px 0px 15px;
}

.espaco-soufa {
    height: 300px;
    padding: 0px 15px 0px 0px;
}

.espaco-soufa img {
    height: 100%;
    width: 100%;
    padding: 0px 0px 15px;
}

.espaco-modelling {
    height: 300px;
    padding: 0px;
}

.espaco-modelling img {
    height: 100%;
    width: 100%;
    padding: 0px 0px 15px;
}

<div class="container-fluid">
    <div class="row">
        <div class="col-md-5">
            <div class="row">
                <div class="col-md-7 hall-way">
                    <img srcset="<?= base_url("assets/img/main-site/galery1.png");?> 1x, <?= base_url("assets/img/main-site/galery1.png");?> 2x" src="<?= base_url("assets/img/main-site/galery1.png");?>"> 
                </div>
                <div class="col-md-5 col-sm-6 col-xs-12 espaco-office">
                    <img src="<?= base_url("assets/img/main-site/galery5.png");?>" alt="">
                </div>
                <div class="col-md-5" >
                    <div class="col-md-12 col-sm-6 col-xs-12 espaco-gallery">
                        <img src="<?= base_url("assets/img/main-site/galery2.png");?>" alt="">
                    </div>
                    <div class="col-md-12 col-sm-6 espaco-stand">
                        <img src="<?= base_url("assets/img/main-site/galery3.png");?>" alt="">
                    </div>
                </div>
                <div class="col-md-7 col-sm-6 col-xs-12 espaco-lounge">
                    <img src="<?= base_url("assets/img/main-site/galery4.png");?>" alt="">
                </div>
            </div>
        </div>
        <div class="col-md-7">
            <div class="col-md-12 col-sm-6 col-xs-12 espaco-waiting-room">
                <img src="<?= base_url("assets/img/main-site/galery6.png");?>" alt="">
            </div>
            <div class="col-md-7 col-sm-6 col-xs-12 espaco-soufa">
                <img src="<?= base_url("assets/img/main-site/galery7.png");?>" alt="">
            </div>
            <div class="col-md-5 col-sm-6 col-xs-12 espaco-modelling">
                <img src="<?= base_url("assets/img/main-site/galery8.png");?>" alt="">
            </div>
        </div>
    </div>
</div>

Answer 1

你应该使用 Bootstrap 的类“img-responsive”

或者更好的方法是使用

img {
    max-width: 100%;
    height: auto;
}

这将使您的所有图像响应并根据宽度调整图像的高度

希望对你有帮助