Automatic Image Resizing

Design help General
1

My project: https://preview.webflow.com/preview/onlinetest?preview=fb9421899cf0f479cf19dc8fd4df7544

I have a header image that contains my logo and is 940px wide (the size of the container).

As with all Webflow images the images automatically resizes for each device. The resized image looks OK on a tablet and iPhone but its too small on a desktop when the browser window is small.

A few questions:

  1. How do I stop images from resizing automatically? When I put in the width and height of the image in the image settings box the image still resizes automatically.

  2. What would be your recommendation for this particular logo/header image? Would you recommend I just let it dynamically resize as is or should I set up a custom sized image for each device? I assume that would require 3-4 seperate images and a custom class (a lot of work and extra bandwith). I’m thinking the easiest solution would be to stop the image from automatically resizing on the desktop and then let it auto resize on other devices. I just need to know how to stop an image from resizing.

  3. Has anyone noticed that in IE the resized images look bad? I’ve noticed that in Chrome and Firefox they look fine but in IE they don’t render well at all. Is there a fix for this?

Thanks!

-Brian

2

I would suggest separating all the layers of that image.

  • Background of the torso should just be a background image set with a size of “cover”
  • All the text should be in a in a layer on top of that background image
  • The bottles can be an inline image on its own
  • the main CTA (call-to-action) button can be a simple “button” element.

Breaking all the elements out into individual elements can help you control the sizing and placement of everything for each breakpoint :slight_smile:

1 Like
3

Can anyone help with this topic? My main issue is I want to prevent a particular image from auto resizing. Surely there is a way to prevent this behaviour?

Thanks.

4

Hi @Bghead8che, thanks for your update. You can try to give the image a fixed width on desktop mode, and then set the width to percentage width on lower viewports.

I was trying to look at the preview site, but it seems the read-only link is not enabled. Could you enable that? Learn web design with free video courses and tutorials | Webflow University

Cheers,
Dave

5

This topic was automatically closed 7 days after the last reply. New replies are no longer allowed.