如何製作一組圖片響應

-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失去了預期的身高。 –

如何製作一組圖片響應

回答

相關問題