[ARCHIVED] Why Responsive Images shrink in the Tab Format?

[yoji_tatsuta]

We had an issue that Responsive Images shrink in the Tab Format <div class="enhanceable_content tabs">

E.g. If you set image width="80%" height="auto" in tabs, images on tabs, except on 1st tab, appear in very small size with style="max-width: 80px;" % value automatically transfer to Max-width px value.

Does anybody have any idea to fix this issue?

[cmk24]

When I add an image with responsive code as shown below:

<p style="width: 100%; max-width: 585px; margin: 20px auto;"><img style="width: 100%;" src="https://psu.instructure.com/courses/2050652/files/105890911/preview" alt="high grass alongside highway and low cut grass on recreation field" data-api-endpoint="https://psu.instructure.com/api/v1/courses/2050652/files/105890911" data-api-returntype="File" /><br /><span style="font-size: 85%;"><strong>Credit:</strong> Penn State University</span></p>

Then I save the page.  On the second tab I see the image is very little.  I go into the code and this is what appears below:

<p style="width: 100%; max-width: 585px; margin: 20px auto;"><img style="width: 100%; max-width: 100px;" src="https://psu.instructure.com/courses/2050652/files/105890911/preview" alt="high grass alongside highway and low cut grass on recreation field" data-api-endpoint="https://psu.instructure.com/api/v1/courses/2050652/files/105890911" data-api-returntype="File" /><br /><span style="font-size: 85%;"><strong>Credit:</strong> Penn State University</span></p>

It adds code to the image of a max-width of 100px;

What can I do to make the images responsive and show at it's max width?

[Alex911]

Hi @yoji_tatsuta & @cmk24, 

I had to face the same problem as @yoji_tatsuta.

I designed a page in Canvas with class="enhanceable_content tabs" and customized my three tabs. 

My Pages includes three tabs. In the second and third tabs, the sizes of my images were scaled down very much, even though I had selected the images in the rich content editor and set them to 100%.

Finally I found a solution that works for me. Just add style="width: 99.9%;" to the image tag and your images will beadjusted to the width of the tab. 

I am attaching a screenshot and hope this helps :)!