如何使用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 */ 
}