How I can scale an grid image with CSS? - html

Question

This is code for a two photos grid with a text hover. I want to make this grid responsive for mobiles and I'm stuck at rescaling code for photos.
This is my code
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;
}
When I entry on website from a mobile, image is not scaled, is only croped. I want to scale this image, to fit for a mobile device.
Please help me with this.
Thank you very much :D !
Here you have a live preview of this grid: http://hciit.atwebpages.com/

Answer 1

Try adding this to your css, to make your image responsive:
.pic img {
width: 100%;
}

Answer 2

in your situation I think the ideal way to do it would be to resize the image and have it saved in many different sizes so on mobile it won't download it full resolution. then you can use a css trick to resize it based on resolution like this
you can read some more about it here 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 */
}