Responsive

@media.

Only screen.

and (min-device-width. 320px).

and (max-device-width. 480px).

min-width

max-width

(min-device-width: 320px) and (max-device-width: 480px) {

/* iPhone, Android rules here */

orientation. Landscape.

{.

Image (dynamic source per requirement).

SrcSet.

https://css-tricks.com/responsive-images-youre-just-changing-resolutions-use-srcset

<img src="small.jpg" srcset="medium.jpg 1000w, large.jpg 2000w" alt="yah">

Browser select best image.

Prevent reflow

http://andmag.se/2012/10/responsive-images-how-to-prevent-reflow/

https://www.sitepoint.com/maintain-image-aspect-ratios-responsive-web-design/

Set container div for img

position. Relative (default).

height. 0.

padding-<top/bottom>: H/W*100%