How to make sure photos are the same proportionate size, regardless of device? | Experience Community
Skip to main content

How to make sure photos are the same proportionate size, regardless of device?

  • February 23, 2023
  • 3 replies
  • 652 views
M
Forum|alt.badge.img+1

Hi, I am trying to present a survey that has many pictures, but I want them to show up the same way regardless of the participant's screen size. Is there a way to make the photos change dynamically depending on the screen size? For example, If the screen in small the image goes smaller and if the screen is big the images go bigger?

Overall, I just want the pictures to take up the same amount of screen space on each computer, proportionately.
I hope this makes sense! I'm open to all suggestions!

3 replies

qualtrics_nerd
Level 5 ●●●●●
Forum|alt.badge.img+19
  • qualtrics_nerd
  • Level 5 ●●●●●
  • February 23, 2023

HI mmccree ,
You can use below style tag to achieve the same:
img {
  width: 100%;
  height: auto !important;
}


And set the proportionate image size based on screen size.
Hope it resolves your query😊!!

    M
    Forum|alt.badge.img+1
    • mmccree
    • Author
    • February 23, 2023

    qualtrics_nerd Thank you for responding! I'm a little new to qualtrics, so can you explain where I would put this? Is it in the look & feel settings? or the HTML for the picture itself?
    I'm also not sure how to set it to be proportionate? I apologize for my confusion

    qualtrics_nerd
    Level 5 ●●●●●
    Forum|alt.badge.img+19
    • qualtrics_nerd
    • Level 5 ●●●●●
    • February 24, 2023

    Hi mmccree ,
    You can use with your img tag only inside style attribute:

    Hope it resolves your query😊!!

    Terms & ConditionsAccessibility statement