Resizing images based on device/screen

I’ve set up a Phoenix app to serve static content (currently just some images and slideshows) using html tags like this:

<img src="<%= Routes.static_path(@conn, "/images/logo.png") %>" style="width:100%">

The images (roughly square-ish in dimension) look great on mobile devices - automatically matching the width of the screen perfectly, nice and big to see, but only taking up about half the screen. :+1:

However, when someone accesses the site on a desktop, each image becomes LARGER than the screen (because the width of a monitor is usually greater than the height), making the layout seem totally “wrong”.

My question is this: Can I set a condition somewhere to check the device type and/or screen size and adjust the width % of the images based on this info?

Thanks in advance.

You can do this with CSS.

1 Like