add a css class instead
Pull Requests are welcome
Category | ⇒ | Components Front End |
Unless I'm missing something, Protostar already has responsive images by default https://github.com/joomla/joomla-cms/blob/staging/templates/protostar/css/template.css#L50.
The strangest thing is that you're having this issue on Firefox. Some browsers required width:100%
to be responsive, but FF always worked properly with max-width:100%
.
I can reproduce your issue but only in IE11. Works fine on Firefox, Chrome and Edge. The issue appears only when parent element is floating (i.e. image float parameter is set).
On IE at least this can be fixed by applying float (.pull-*
) classes to the image itself rather than to the parent (.item-image
). Can you test this on FF?
How can it not be using if the code is in template.css?
img {
max-width: 100%;
width: auto \9;
height: auto;
vertical-align: middle;
border: 0;
-ms-interpolation-mode: bicubic;
}
This looks like a browser bug. I can reproduce this on IE11 but not in FF47.
I can reproduce it in FF45. It's fixed in FF47 (or 46). In IE11 issue can be solved by applying float classes directly to images.
Labels |
Added:
?
|
@SharkyKZ if it fixed, i'm say - OK.
i need option for set "max-width"
for example:
<img alt="Article Title" src="/images/stories/image-article.jpg" style="max-width: 300px; height: auto;" title="Article Title">
max-width: 100%
or
max-width: 200px or 100px or 500px, etc.
firefox 46.0 fix this problem!
Closing - thanks for looking at this
Status | New | ⇒ | Closed |
Closed_Date | 0000-00-00 00:00:00 | ⇒ | 2016-05-08 08:46:31 |
Closed_By | ⇒ | brianteeman |
code in site like this:
<img alt="Article Title" src="/images/stories/image-article.jpg" style="max-width: 100%; height: auto;" title="Article Title">