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.
Questions tagged [responsive-images]
518 questions
7
votes
0 answers
Flutter: How to determine cacheSize of Images before launch?
The Flutter DevTools displayed the message: Consider resizing the asset ahead of time, supplying a cacheWidth parameter of 35, a cacheHeight parameter of 35, or using a ResizeImage.
Because my image size depends on the screen size I am searching for…
LP Square
- 927
- 1
- 10
- 17
7
votes
2 answers
CSS: scale background SVG in only one direction
I have a nice background SVG image from inkscape which marks the transition from one text section to the next. I want that background image to scale up or down to the full width of the text section. For reasons of responsivity, that size depends on…
David
- 513
- 7
- 14
7
votes
4 answers
Load an image only for mobile device
I want to know if it is possible for my front page to load an image dedicated for mobile users only. I know it is possible with javascript, but I want to know if I can achieve the same using CSS only. I have tried to do some research but can't find…
S.Reyes
- 91
- 1
- 6
7
votes
1 answer
What do the width and height attributes do when using srcset and sizes?
If we're using the srcset and sizes attributes, it is still useful to specify a src attribute as a fallback. Similarly, I imagine that older browsers would also take advantage of width and height attributes if they were specified. But do modern…
Flimm
- 136,138
- 45
- 251
- 267
6
votes
1 answer
How to lazy load a Bootstrap 4 card's image?
Im trying to figure out how to lazy load card-columns with card-img-top, example:
6
votes
1 answer
Wordpress responsive images - Selecting wrong image on retina screens
I've been working hard on trying to get responsive images working on this website I'm building and just when I thought it's going well, I look at it on the iPad retina screen and it's selecting the wrong image. Not only is it the wrong size but it's…
Shaun
- 757
- 1
- 8
- 36
6
votes
2 answers
Safari not requesting srcset images on resize
I want to provide responsive images, for that I use srcset attribute.
Mikel
- 5,902
- 5
- 34
- 49
6
votes
1 answer
Bootstrap Responsive Image Grid
I want to create a responsive image grid with Bootstrap. I have 4 images and I need 1x4 grid for desktop size and 2x2 grid for mobile size. I tried the following code, but there are unnecessary blanks between images for desktop size. Also there…
nanokozmos
- 323
- 1
- 7
- 14
6
votes
2 answers
Responsive Images: Resize or Dynamically Crop?
This question is actually not about coding but choosing the right method for a task. I don't know if it is against the rules of SO but here you go..
I once built a small CMS for a local newspaper which gave them the functionality of adding their…
Subliminal Hash
- 13,614
- 20
- 73
- 104
5
votes
0 answers
can't get NgOptimizedImage to be responsive in Angular 15
In an Angular 15.1.x project, i'm trying implement an image that is responsive on mobile and desktop using NgOptimizedImage. The mandatory img width and height attributes are overriding the sizes attribute.
![]()
drav
- 498
- 1
- 4
- 15
5
votes
1 answer
Can I make the ![]()
`srcset`/`sizes` attributes take into account my use of `object-fit: cover`?
While trying to implement a full-bleed background image I think I've discovered an issue with the combined use of the responsive img srcset/sizes attributes and CSS's object-fit: cover;.
Given the following simple test case:
![]()
BigglesZX
- 958
- 1
- 12
- 27
5
votes
1 answer
Auto-width image with `srcset` attribute
Say I have the following image:
It appears that the sizes attribute I have not included defaults to 100vw, hence the small image is upscaled to the width of the viewport.
What do…
Nathan Arthur
- 8,287
- 7
- 55
- 80
5
votes
6 answers
srcset - Responsive image loading wrong file
My goal is to serve different versions (resolutions/sizes) of the same image, which should occupy 100% of the width of the viewport, so I can serve a 800px version to mobile devices (or, generally, devices with smaller displays or slower…
jmng
- 2,479
- 1
- 25
- 38
5
votes
1 answer
Responsive images without layout reflow when they load
To have responsive images that scale down proportionally on a small screen, I currently use max-width: 100%; (or a fixed max width). As opposed to specifying a fixed size, this has a terrible downsize in that when the page is loading, the browser…
Neme
- 492
- 3
- 14
5
votes
1 answer
Image height inside flexbox not working in Chrome
I have a div using flexbox to center its items. Inside this div I have 3 elements, one of them is an image.
#container1 and…
Gerard Reches
- 3,048
- 3
- 28
- 39