aswiseman Posted October 26, 2018 Share Posted October 26, 2018 I've been using w3-cell-row and w3-cell to layout a web page and have noticed that when I put an image in a cell and use the w3-image class to make it responsive, the image size appears fixed in IE11. (However, it works fine Firefox, Chrome and Edge.) Whereas if I switch to w3-row with w3-col to do the layout, IE11 starts working. Is there anything I can do to get responsive images working in w3-cell for IE11? Demo here...https://jsbin.com/cekegohodu/edit?html,output Code snippet... <div class="w3-container"> <div class="w3-row-padding"> <div class="w3-col m5" style="background-color: #fee"> <img class="w3-image" src="https://www.dummyimage.co.uk/320x180/cbcbcb/959595/Dummy Image/32" width="320" height="180" alt=""> </div> <div class="w3-col m7" style="background-color: #eef"> <p>Using w3-row-padding, left-hand column is m5 and right-hand column is m7. The image gets smaller as the window width collapses.</p> </div> </div> <div class="w3-cell-row"> <div class="w3-container w3-cell w3-mobile" style="width:41.66667%;background-color: #efe"> <img class="w3-image" src="https://www.dummyimage.co.uk/320x180/cbcbcb/959595/Dummy Image/32" width="320" height="180" alt=""> </div> <div class="w3-container w3-cell w3-mobile" style="width:59.33333%;background-color: #ffe"> <p>But using w3-cell-row with w3-cell and 41.66667% and 59.33333% cell widths doesn't squeeze the image size as the browser window narrows on IE11?</p> </div> </div> </div> Link to comment Share on other sites More sharing options...
aswiseman Posted November 2, 2018 Author Share Posted November 2, 2018 I have found a workaround - putting a max-width on the cell's div seems to get the shrinking of the image working in IE11... style="width:41.66667%;background-color: #efe;max-width: 240px;"> https://jsbin.com/xaxiberesi/1/edit?html,output This sort of tracks the image shrinking with the w3-row-padding dummy image. But once you reach single-column / mobile mode, the image is then too small. I can fix this with some CSS. I also tried a max-width using vh units. Anyone got any better ways? Is this a bug or a feature? 🙂 Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now