Stack Overflow
Stack Overflow

Questions tagged [responsive-images]

Responsive-images is the part of Responsive Web Design (RWD) dealing specifically with images on the web to provide optimal experiences across a wide range of devices based on screen size, platform, and orientation.

518 questions
1
vote
1 answer

Having issues with images overlapping using CSS

Initially, I had this formatted the way that I wanted. After adding and removing code over the last few hours, I'm unsure of what revision that I made that prevents me from separating the individual images. They're supposed to be side-by-side with…
thesd5x
  • 15
  • 5
1
vote
2 answers

How to maintain image aspect ratio and make sure it fits inside the container?

I have been struggling with this problem for a couple of weeks now. I have a container which is 90vh. I have some header text and below it is an image. I need to maintain the aspect ratio of 16:9. But, the height must never exceed the height of the…
Nyi Nyi Hmue Aung
  • 587
  • 1
  • 7
  • 19
1
vote
1 answer

How make a list of images responsive inside a flexbox container using all available height

I want to create a list of images that will fill the whole height of the side panel of my app. But I want the images to be responsive too. I was able to make the images responsive, the problem is that the side panel won't shrink for the resized…
Guilherme Aiolfi
  • 45
  • 7
1
vote
0 answers

Do mobile browsers currently use srcset to conserve bandwidth?

We know that the img tag's srcset property is important in creating responsive websites. Do mobile browsers on cellular data currently use srcset to optimize for bandwidth? For example, if a user has a high-pixel-density iPhone in low data mode,…
Ahmed Fasih
  • 6,458
  • 7
  • 54
  • 95
1
vote
0 answers

Need help making my HTML email responsive,. The hybrid-fluid design I'm using isn't working

I have a simple 2 column layouts using a hybrid fluid design. I want the columns to stack on top of each other on mobile screens. I have a two-columns class table that wraps around my column class tables. On my column class tables i have…
bobby Fasco
  • 11
  • 2
1
vote
1 answer

img srcset and sizes not working properly and impossible to adjust! any ideas?

I have been trying to adjust srcset and sizes for responsive images and load the most appropriate one to avoid loading heavy images when they are not really needed, but I'm facing problems to do this. 1st scenario: Using only srcset attribute:
juanpablob
  • 327
  • 2
  • 8
1
vote
1 answer

Github pages not working properly in respnonsive view

In browser responsive view it seems fine. All things working properly But when I view it on my android phone. It doesn't align properly. I tested it on many devices. All results are the same. What is the problem? Can anyone help? This is very weird
CoderPs
  • 11
  • 2
1
vote
2 answers

Why srcset not work normally on MacBookPro(or maybe retina monitor caused?)

First of all, before asking, I have read lots of articles about responsive images and srcset, so I am sure the codes with demo absolutely correct, but result does not as expect. We can open MDN Demo for testing. And let's keep eyes on part of html…
whidy
  • 953
  • 6
  • 16
1
vote
1 answer

Django-respondive-images dosen't find files when not in local

i use responsive-images https://pypi.org/project/django-responsive-images/ on my PC django works well and also django-responsive-images when i move all up to my website responsive images dosen't find images in my template file if i use
oscurodrago
  • 788
  • 1
  • 8
  • 18
1
vote
0 answers

Responsive images with different resolutions and different sizes on page

I've read through a fair number of guides on responsive images, but none seem to cover the intersection of serving different resolutions and setting sizes based on those resolutions to avoid layout shifting. For example, on desktop, I'd like to load…
rschristian
  • 1,730
  • 1
  • 6
  • 15
1
vote
3 answers

Is there any way to completely move an element position depending on screen size ? CSS

So I'm trying to learn HTML and CSS for now, and not getting yet into jvS. I'm trying to create a responsive design, and I understand media queries somehow. Basically, I have a screen-size width nav bar on the desktop with a logo in it. When I get…
zippo
  • 11
  • 1
  • 2
1
vote
1 answer

How to eliminate a column for mobile view?

I'm new to coding and am trying to make a responsive site. On the desktop version of the site, I want to have the text in one column and image in another. But for the mobile version, I would like the image to be on top of the text. Is there any way…
user17171254
  • 25
  • 2
1
vote
0 answers

Explicitly setting height and width on image seems to nullify sizes attribute

Explicitly setting height and width on an image is a recommendation of Lighthouse and Pagespeed insight. But I also want to make use of the srcset and sizes attributes to offer responsive images. But I can only conclude that setting height and width…
gijswijs
  • 1,958
  • 19
  • 24
1
vote
0 answers

WordPress: Change responsive image sizes in WooCommerce product page

I want to change the scrset output for the WooCommerce gallery images. At the moment I'm using the thumbnail size woocommerce_single. It works fine for desktop because the image has an height of 450px. But the image on mobile is a bit smaller with…
Cray
  • 5,307
  • 11
  • 70
  • 166
1
vote
0 answers

Automatically provide the best image based on browser and viewport with

I want to provide always the most optimized image to the viewer based on the browser capabilities and viewport/screen properties. My CMS allows me to dynamically generate images as AVIF, WEBP or original format in resized versions. The theme I am…
Peleke
  • 891
  • 2
  • 10
  • 23
1 2 3
…
34 35