Here’s a simple way to scale images in your responsive web design using CSS, two classes and some html.
The CSS
I created two classes one named .image-wrapper and the other I named .scale-image.
First, lets create the two classes. We will name the first one .image-wrapper and this will be used as a div.
.image-wrapper
{
position: relative;
}
Next we will make the .scale-image class. This class will scale the image inside the image-wrapper div. You can play around with the max-width percentage based on your design.
.scale-image
{
display: block;
width: auto;
max-width: 75%;
}
The HTML
Place the image code inside the div of the image wrapper you created and then use the scale-image class to scale the image based on the device or browser size.
<div class="image-wrapper">
<img src="image_name.jpg" class="scale-image" />
<div />
That’s it your done. If you want to see the code in use you can check out a clients site I’m doing here.
Yo…I have been trying for about four days to make this scaling thing happen, and I was about ready to rip my hair out. I cannot tell you how frustrated I was and how many hours I wasted simply trying to get my logo to be scalable (in 2014, kids!). Therefore, here is an ENORMOUS virtual basket of THANKS, and if I knew you I would probably bake you a pie or something for the relief and the good night’s sleep I know I shall be getting tonight. Thank you so much!!!
You are so welcome, and I’m really glad it helped !
Pingback: Scalable Images | L'estetica Iudiciani
Hello there, You have done an incredible job.
I will definitely digg it and personally suggest to my
friends. I am sure they’ll be benefited from this web
site.
Thanks for the support and glad you enjoy the site.
I would to insert a image about 830 pixels X 330 pixels into my google site, but would also like it to scale correctly on different devices any advise
This should work for that. It’s exactly what I used it for.
Sorry for the late reply. I haven’t been posting here as much as I should and this is the first time I’ve logged into the account for many months. Anyway, the html goes in the html file. I used a stylesheet for the css and then just use a div with the image-wrapper class in your html.
Pingback: xxx553.xyz
Pingback: sex363.xyz