?
avatar sanek4life
sanek4life
22 Apr 2016

Steps to reproduce the issue

adapt2

Expected result

adaptive image - resizing an image, depending on the width of the screen

Actual result

adaptive need

System information (as much as possible)

Joomla 3.5.1

Additional comments

Please, add this code for images:

style="max-width: 100%; height: auto;"

avatar sanek4life sanek4life - open - 22 Apr 2016
avatar sanek4life
sanek4life - comment - 22 Apr 2016

code in site like this:

<img alt="Article Title" src="/images/stories/image-article.jpg" style="max-width: 100%; height: auto;" title="Article Title">

avatar andrepereiradasilva
andrepereiradasilva - comment - 22 Apr 2016

add a css class instead

avatar brianteeman
brianteeman - comment - 22 Apr 2016

Pull Requests are welcome


This comment was created with the J!Tracker Application at issues.joomla.org/joomla-cms/10051.

avatar brianteeman brianteeman - change - 22 Apr 2016
Category Components Front End
avatar SharkyKZ
SharkyKZ - comment - 22 Apr 2016

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.

avatar SharkyKZ
SharkyKZ - comment - 22 Apr 2016

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).

avatar SharkyKZ
SharkyKZ - comment - 22 Apr 2016

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?

avatar sanek4life
sanek4life - comment - 23 Apr 2016

@SharkyKZ Firefox 45.0.2, Win 10.

Protostar no using responsive images by default.

testtttt

you need add this code to image for right view:

style="max-width: 100%; height: auto;

avatar SharkyKZ
SharkyKZ - comment - 23 Apr 2016

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.

avatar SharkyKZ
SharkyKZ - comment - 23 Apr 2016

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.

avatar brianteeman brianteeman - change - 23 Apr 2016
Labels Added: ?
avatar sanek4life
sanek4life - comment - 23 Apr 2016

@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.

avatar sanek4life
sanek4life - comment - 26 Apr 2016

firefox 46.0 fix this problem!

avatar brianteeman
brianteeman - comment - 8 May 2016

Closing - thanks for looking at this


This comment was created with the J!Tracker Application at issues.joomla.org/joomla-cms/10051.

avatar brianteeman brianteeman - change - 8 May 2016
Status New Closed
Closed_Date 0000-00-00 00:00:00 2016-05-08 08:46:31
Closed_By brianteeman
avatar brianteeman brianteeman - close - 8 May 2016

Add a Comment

Login with GitHub to post a comment