如何使用CSS縮放網格圖像？

Question

這是帶有文本懸停的兩張照片網格的代碼。我想讓這個網格對手機響應，而我卻停留在爲照片重新調整代碼。 這是我的代碼 HTML：

<div class="plansgrid" align="center"> 
      <div class="pic"> 
       <img src="images/planssgrid/mcp.png" /> 
       <div class="text"> 
        <h1 style="font-weight: bold;">Medical Cash Plan</h1> 
        <p>Recrive Cashback to reduce the cost of your everyday medical expenses</p> 
       </div> 
      </div> 
      <div class="pic"> 
       <img src="images/planssgrid/pcp.png" /> 
       <div class="text"> 
        <h1 style="font-weight: bold;">Personal Accident Plan</h1> 
        <p>Fracture benefits and cash lump sums from accidental injury</p> 
       </div> 
      </div> 
     </div> 

CSS：

.pic { 
    display: inline-block; 
    position: relative; 
    max-width: 100%; 
    height: auto; 
    overflow: hidden; 
} 

.text { 
    position: absolute; 
    bottom: 0; 
    right: 0; 
    width: 100%; 
    height: 0; 
    text-align: center;  
    background: rgba(255, 255, 255, 0.7); 
    transition: height 0.7s ease-out; 
    color: darkgreen; 
} 
.pic:hover > .text { 
    height: 150px; 
} 

當我在網站上錄入從移動，圖像不進行縮放，只croped。我想縮放此圖像，以適應移動設備。 請幫我這個。 非常感謝：D！

在這裏，你有這個電網的實時預覽：http://hciit.atwebpages.com/

Answer 1

嘗試添加該你的CSS，使你的形象響應：

.pic img { 
    width: 100%; 
} 

Answer 2

在您的情況

我認爲理想的方式做到這一點將是調整圖像大小，並保存在許多不同的大小，所以在手機上它不會下載全分辨率。那麼你可以使用一個CSS技巧基於這樣

分辨率來調整它，你可以閱讀一些更多關於它這裏CSS Tricks

/* Smartphones (portrait and landscape) ----------- */ 
@media only screen 
and (min-device-width : 320px) 
and (max-device-width : 480px) { 
    /* Styles */ 
} 

/* Smartphones (landscape) ----------- */ 
@media only screen 
and (min-width : 321px) { 
    /* Styles */ 
} 

/* Smartphones (portrait) ----------- */ 
@media only screen 
and (max-width : 320px) { 
    /* Styles */ 
} 

/* iPads (portrait and landscape) ----------- */ 
@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) { 
    /* Styles */ 
} 

/* iPads (landscape) ----------- */ 
@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) 
and (orientation : landscape) { 
    /* Styles */ 
} 

/* iPads (portrait) ----------- */ 
@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) 
and (orientation : portrait) { 
    /* Styles */ 
} 

/* Desktops and laptops ----------- */ 
@media only screen 
and (min-width : 1224px) { 
    /* Styles */ 
} 

/* Large screens ----------- */ 
@media only screen 
and (min-width : 1824px) { 
    /* Styles */ 
} 

/* iPhone 4 ----------- */ 
@media 
only screen and (-webkit-min-device-pixel-ratio : 1.5), 
only screen and (min-device-pixel-ratio : 1.5) { 
    /* Styles */ 
}