cancel
Showing results for 
Show  only  | Search instead for 
Did you mean: 
yoji_tatsuta
Community Member

Why Responsive Images shrink in the Tab Format?

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?

1 Reply
cmk24
Community Participant

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?