This is the correct answer (trust me on this -- I took several days to figure it out).
Kindle's formatting guide specifies that you should include as high a resolution file as you possibly can. Then, Kindle shrinks the image to a size appropriate for that platform.
Kindle definitely supports the css width property and min-width on KF8 devices and apps. But it does NOT support the max-width property. You can see this on the 16.2 CSS Support Table page 81 inside the latest Amazon Kindle Publishing Guidelines (Version 2015.4) (And Version 2019.2.)
Here's what I do:
div.image-replace-title {
width: 95%;
margin-left: auto;
margin-right: auto;
}
div.image-replace-title img {
width: 100%;
display: inline;
}
I faced a situation where some of my images were low-quality and I needed to make them full width on Kindle. With other platforms I could do it by using the css max-width property, but for the kindles, the images themselves needed to be blown up. For that reason, I used my graphics program to convert my 500px wide image to 2000 px. Yes, you risk pixilation for low quality images, but remember the widest ebook reading device is probably 10 inches. Even mediocre images still look decent at 2000 px on a 10 inch device. But the lesson learned is to use as high resolution images as possible, and let kindle's distribution program shrink the images as needed.
E-ink devices from 2010 support KF8, so they should have the same display. But kindlegen will shrink the image so it's optimized for the specific device.
For example, I have an image-rich epub file which is 7.5 mb. When you use kindlegen, the total image is 15-20 mb. But when Amazon downloads the file to your device, it was less than 2 mb.
width:100%; height:auto;
does the trick for me. For your css, have a class directly on the image element rather than wrapping.