Auto resize images to screen width

Permalink
I would like the images of my web autoresize to the screen width when you visit it in tablets or mobiles.
Is there any way or add-on to do so, without messing around with css or code (because I have no idea)?
Thanks.

frankysev
View Replies:
studio108 replied on at Permalink Reply
studio108
This addonhttp://www.concrete5.org/marketplace/addons/picturefill-image/...
may be of some help. I haven't used it personally but this should do the job well.

In fact this is better a better option than regular CSS because it should load up the optimised image size for a mobile, tablet and desktop.

Hope this helps in some way.

Regards
Luke
frankysev replied on at Permalink Reply
frankysev
Thanks studio108.
I have looked to that add-on. It costs 15$ and there is no comments about it. Do you know if exist a way "to try before buy" in C5 market?
ronyDdeveloper replied on at Permalink Reply
ronyDdeveloper
The best way to do it by adding a single line in css. Here is the code
img {max-width: 100%}


Rony
frankysev replied on at Permalink Reply 1 Attachment
frankysev
Thanks Rony.
I am using Archer blue theme. Where exactly should I add that line code? I attach the .css file the theme is using.
ronyDdeveloper replied on at Permalink Reply
ronyDdeveloper
Simply open the iGotStyle.css file and find
html {
    overflow-y: scroll;
}


Then add my above code just beneath this line like
html {
    overflow-y: scroll;
}
img {
    max-width: 100%;
}


Rony
mnakalay replied on at Permalink Reply
mnakalay
Hello,
You have to understand what you will get using one of the aforementioned solutions:
1- The add-on will allow you to select different pictures that will show up at different resolutions (desktop, tablets, small phone screen). The advantage of that solution is that you can select the size as well as the look of the photos for different resolutions. Instead of having to deal only with automatically resized pictures, you will have to deal with that yourself first.

2- max-width: 100% in the css. That is an extremely commonly used solution that forces pictures to resize according to the size of their container so not necessarily the screen. The problem with that solution is that it forces smaller handheld devices to still download the big picture even though they will see it resized. That is often a problem in terms of speed for those devices.

Having said so, none of these solutions will be of particular interest to you if your website is not responsive in the first place, meaning if your site was not build to adjust to different screen sizes and resolutions.

Pictures will only take the space they were given in the first place. If their container takes the whole screen width than they will too. If they are in a container that spans only half the screen so will the images inside the container.
frankysev replied on at Permalink Reply
frankysev
Thank you very much for your answer.
I think the theme I am using is responsive, Archer blue, but the images are always sized fixed, regardless the size of screen you are watching the web at.
Now, I don´t know what to do.. . ?:|
mnakalay replied on at Permalink Reply
mnakalay
Well then may the solution provided by ronyDdeveloper will work.
Do you have a live version of the site and an address we can have a look at?
frankysev replied on at Permalink Reply
frankysev
Hello! You can see it athttp://www.educabitatsur.com
mnakalay replied on at Permalink Reply
mnakalay
Indeed the site is responsive but the images all have a size hard-coded meaning their size was defined in the code so that stops them from changing size in the first place.
On the other hand they are really small decorative images, why do you want them to take the whole width of the page? Their width is 300px which should work more or less ok filling up the screen on small screens.
frankysev replied on at Permalink Reply
frankysev
Thank you very much again for your answer.
I don´t understand what you mean with "they have a size hard-coded". I just insert each image with the image block or inside a content block, not coding.
It is true that some of them have a defined size less than its original size. But I made a test: insert a picture without defining its size, and similarly, in the mobile browser the image is not resized.
mnakalay replied on at Permalink Reply
mnakalay
What it means is that within the code of your page width and height are written with a value so for the browser that's the size of your picture and you can't resize it. That's a problem with the image block. To avoid that you would have to create a template for the image add-on that omits width and height so that the browser can resize it (after a few more tweaks).
That's a little more involved though so you might want to consider how important it is for you to make that change.
mnakalay replied on at Permalink Reply
mnakalay
Frankly the least hassle inducing solution for you would be to follow studio108 suggestion and use the add-on he gave you a link to instead of the image block.
Results would be excellent and you wouldn't have to deal with any code.