CSSでグリッドイメージを拡大縮小する方法は？

Question

これは、テキストホバー付きの2つの写真グリッドのコードです。私はこのグリッドを携帯電話に対応させたいと思っています。写真のコードを再スケーリングすることに悩まされています。 これは 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; 
} 

携帯からウェブサイト上のIエントリが、画像は、拡大縮小されていないだけcropedされます。私はこの画像をモバイル機器に合わせて拡大したいと思っています。 これを手伝ってください。 ありがとうございました：D！ここで

あなたはこのグリッドのライブプレビューを持っている：あなたのイメージが応答するために、あなたのCSSにこれを追加することhttp://hciit.atwebpages.com/

Answer 1

試してみてください。あなたの状況で

.pic img { 
    width: 100%; 
} 

Answer 2

私はそれを行うための理想的な方法を考えます画像のサイズを変更してさまざまなサイズで保存することになります。そのため、モバイルではフル解像度でダウンロードしません。その後、あなたは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 */ 
} 

ここでそれについていくつかの詳細を読むことができ、この

のような解像度に基づいて、それのサイズを変更するCSSのトリックを使用することができます