W3css - For IE11, no responsive images with w3-cell-row + w3-cell, but OK with w3-row + w3-col?

[aswiseman]

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>

 

[aswiseman]

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? 🙂