Jump to content
aswiseman

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

Recommended Posts

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>

 

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...

×
×
  • Create New...