img not preserving aspect ratio when browser resizes

[gib65]

Hello,

I'm having a problem with resizing an image when the browser resizes. Please see the attached screen shots to follow along.

In the screen shot titled "full size.png" I have an image of a body diagram:

5750

Then I shrink the browser by clicking and dragging up on the bottom edge of the browser. In the screen shot titled "mid size.png" you can see the result: everything looks fine. The body diagram has shrunk to fit the new browser size. I have the image set to preserve the height at 90%. The screen shots shows that this works (up to this point) and also preserves the aspect ratio. So by however much the image shrinks in height so as to fit the new browser size, so too does it shrink in width by the same ratio.

5751

Now I shrink the browser even more (same way: click and drag upwards the bottom edge). See the screen shot "small size (squishing).png". As you can see, at a certain point between "mid size.png" and "small size (squishing).png", it stops preserving the aspect ratio. The body diagram continues to shrink in height (which is good) but no longer shrinks in width. The guys gets fat.

5752

It's almost as if there is a min-width for the image even though I'm not setting any. I even tried setting min-width: 0, but that didn't work. I don't have any min-widths for any of the image's parents divs either.

Can anyone suggest what might be going on?

This problem only shows up in Chrome. IE doesn't have this problem.

Here is the HTML for the page (a lot of detail is left out, but this is the general layout):


<div id="Header">...</div>
<div id="Body">
<div id="LeftMenu">...</div>
<div id="RightBodyDiagram"> ... <img id="BodyDiagram" ... > ... </div>
</div>
<div id="Footer">...</div>

Here is the CSS:


#Header
{
height: 75px;
width: 100%;
background-color: #01132A;
text-align: left;
min-width: 868px;
}

#Body
{
display: table;
height: calc(100vh - 105px);
width: 100vw;
}

#LeftMenu
{
display: table-cell;
width: 15vw;
height: calc(100vh - 105px);
background-color: #c6bfbf;
min-width: 160px;
}

#RightBodyDiagram
{
width: 85vw;
height: calc(100vh - 105px);
display: table-cell;
vertical-align: middle;
text-align: center;
}

#BodyDiagram
{
height: 90%;
outline: none;
}

#Footer
{
position: absolute;
bottom: 0;
display: table;
height: 30px;
width: 100vw;
background-color: #000055;
display: table;
color: white;
font-family: arial;
font-size: 10pt;
}

Thanks for the help.

[Beverleyh]

Just a reminder on formatting your code. You can use the # button in the toolbar at the top of your post.

A live page would also be easier for others to offer troubleshooting suggestions. You can set up a reduced, live example in JSBin, JSFiddle or CodePen

[gib65]

I created a fiddle here: https://jsfiddle.net/Lzqder3c/

Again, I'm having trouble getting the image to show, but at least you can see the code and substitute any image you want.

Interestingly, I found that, at least in this simplified example, I can remove the problem by setting the width of the div who id is "body" to 100% instead of 100vw. That is, 100% maintains the aspect ratio. 100vw does not.

This fix doesn't work in my actually application, however.

[gib65]

I discovered something else: the point at which the body diagram starts losing its aspect ratio is when the footer starts overlapping with the two divs: "LeftMenu" and "RightBodyDiagram".

I discovered this by giving the footer div 0.5 opacity. Then I could see the LeftMenu and RightBodyDiagram divs behind it after shrinking the browser passed a certain point.

Please see the attachment for an example.

I'm not sure why the LeftMenu and the RightBodyDiagram divs, or their parent div "Body", stops shrinking with the browser at this point as I don't have a min-height set for them and the height is set to calc(100vh - 105px).