title: How to set image width to 100% based on certain size constraints of container?
body: <p>The images can be wider than the width of their container or smaller than it. To control the width of larger images, I can use <code>max-width: 100%</code>. Similarly, I can also set <code>width:100%</code> for smaller images.</p>
  
  <p>Is there any way to set image width to 100% only if the original image is at least 50% of its container width? I will prefer a CSS based solution if it exists because the images will load dynamically.</p>