SOLVED Image Scalable - How?
-
-
- Rob Livingston
- Rocketeer
- Posts: 84
- Thanks: 2
-
How can I make images scalable without wrapping everyone one of them in a div first. That would especially be cumbersome where text wraps around images.
In the world of flat html all I had to do was put this in my css file:
img.scalable {height:auto !important; width:auto !important; max-width:100%;}
I didn't have to do anything special with every image first.
In the world of gantry, and maybe Joomla too, this does not work.
So, how is this done?
Thanks,
Rob
-
-
-
- Rob Livingston
- Rocketeer
- Posts: 84
- Thanks: 2
-
Well, in the bootstrap css there is similar code:
img {
border: 0 none;
height: auto;
max-width: 100%;
vertical-align: middle;
}
I think what the issue is is if an image isn't wider than the device viewport then it won't shrink at all. I do have a client site where a large home page image sizes down like it is supposed to.
In moderately sized devices it is not much of an issue but I'd like them to appear smaller on mobile phones. So I guess that is an @media query how-to issue. Agreed?
Thanks,
Rob - Last Edit: 9 years 10 months ago by Rob Livingston.
-
-
-
- Henning
- Preeminent Rocketeer
- Posts: 29362
- Thanks: 954
- Volunteer
-
[url=]I think what the issue is is if an image isn't wider than the device viewport then it won't shrink at all. [/url]
No, it's about the element it's nested in.
For example if it's in a sidebar with a width of 360px max-width: 100% means it won't be wider than 360px ...
max-width (and min-width) overides width.
Of course you can use classes and @mediaqueries based on the context the image is used in.
-
-
-
- Rob Livingston
- Rocketeer
- Posts: 84
- Thanks: 2
-
Ok, I did this in the css:
@media (min-width: 320px) and (max-width: 360px) {
.article img {max-width: 50% !important;}
}
I have text and an image in a module that stretch the full width up to 1200px. I applied this new class as a Module Class Suffix. That didn't work. Then I tried going into the module in the source code editor and applied the class directly to the div that the text and image reside. That worked. I can see that this way can be used if this was an article instead of a module, the principle is the same.
I agree that images in smaller width modules will shrink down noticeably. I guess this is solved then, unless someone else has a better solution.
Thanks,
Rob
-
-
-
- Henning
- Preeminent Rocketeer
- Posts: 29362
- Thanks: 954
- Volunteer
-
I can't see what you did or added.
@media (min-width: 320px) and (max-width: 360px)
looks like stange idea.
As a mod I looked into thousands of sites.
Never seen a site with such a tight @media-rule (just 20px)
-
-
-
- Rob Livingston
- Rocketeer
- Posts: 84
- Thanks: 2
-
The concept of min and max width was pinched from the Diametric code. True that I may not have needed to create that tight window but it was the concept I tried, based on Firefox Web Develper Tools and checking on the cookie cutter small sizes. In reality the max dimension is all I probably need.
Adding that little bit of media code and attaching the class to the div tag is what I did. Now in every instance that I want to make sure images get smaller on little devices I'll have to apply the class code, unless of course, the images are really large then yes, they will become smaller on their own because of the code already there.
-
Time to create page: 0.055 seconds