Hero image

img {width: 100%}

NOTE:  Upscaling a small raster image will cause distortion. And a large image will be too much bandwidth for limited data plans.  Ideally, you should have 3-4 different sized, cropped images to fit different devices. 

Since very few images scale down gracefully from a 27" 16:9 ratio (desktop) to a 5" 9:16 ratio (portrait orientation cell phone), use the <picture> element instead of an <img> tag. You can serve an image that has been cropped both for size and orientation of mobile devices to phones and tablets, and a then different larger image for desktops, all within the same html.

Here's a very good explanation of how (and why) to use the <picture> tag:

https://www.smashingmagazine.com/2014/05/responsive-images-done-right-guide-picture-srcset/

Admittedly, it's a little extra reading (and a bit daunting at first), but you really should know how to do this, even though there's no version of DW that does.