如何制作一组图片响应

-1

我有一种我希望我的照片出现的样式，但我无法让它们响应。我需要做些什么来使这些图片反应灵敏？目前的结果是，图片变得更加苗条。这是我在下面提供的代码的结果：如何制作一组图片响应

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

来源

2016-09-28 Blake Paige

如果你使用引导图像的高度，只需添加类=“IMG “响应”到每一个img（你可以动态地做到这一点，你充电img标签） – JoelBonetR

设置你的图像的高度，以自动

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

来源

2016-09-28 10:02:06

我的img消失了。 –

对不起，推荐。我正在考虑响应背景图像。 –

我要试试它的背景图像 –

你应该使用引导程序的类“img-responsive”

或者更好的办法是使用

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

，这将使乌拉圭回合的所有图像响应，并据此调整宽度

希望它有助于

来源

2016-09-28 10:16:26 Rahul

与类img响应它不起作用。最大宽度：100％; 身高：自动;在div我得到了我想要的响应效果，但因为我的身高是自动的，所以我的img失去了预期的身高。 –

如何制作一组图片响应

回答

相关问题