How can i stop Image from resizing on smaller devices ?
I want the image to be always the same size and keep it centerd , (and the edges of the image to go “off screen” if the screen is too small)
Think of it like a logo with wings , i dont care about the wings only the logo at the center is important.
and i dont want to resize it in any way.
Here is my public share link: LINK
(how to access public share link)
Actually i have the same question. Let’s say I have a slider on home page and my pictures on slider are wide pictures (800x300 width>weight). It works well on desktop view, but it will then go messy when I switch it to mobile view. Since mobile view is different (width < height), the pictures are not really scaled to a smaller size, but instead showing only a small portion of the pictures…
I am not sure what to do for this kind of situation, maybe for mobile view we just have to sacrifice certain content of the image. If you make it scale with view port, the picture will become too small to see?
Hi, @flowman and @supermoose .
You can use the div with fluid size (95vw, for example), set overflow: hidden for this div and position: relative.
Then you add the image to this div with position:absolute and center it horizontally and vertically. At the same time, you set the image size in pixels, so it will not change for different devices.
Also, you can set the image as a background image for that div. Center it and set the size in the background image settings.
Cheers,
Anna
This topic was automatically closed 60 days after the last reply. New replies are no longer allowed.