responsive-images Questions
1
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 a...
Weeds asked 17/2, 2023 at 21:37
10
Solved
I'm currently working on a mobile landing page for a company. It's a really basic layout but below the header there's an image of a product which will always be 100% width (the design shows it alwa...
Dissatisfied asked 19/6, 2012 at 11:24
2
Solved
I have a div using flexbox to center its items. Inside this div I have 3 elements, one of them is an image.
<div id="flex-container">
<div id="container1"></div>
<img src="#...
Poison asked 30/11, 2016 at 17:18
3
Solved
I have a website that includes header images.
However these header images do not seem to load at first when I load the website in Firefox or Safari on iOS. Here’s a screenshot:
This is the code fo...
Oryx asked 9/12, 2023 at 13:46
3
Solved
How can I detect if the browser supports AVIF images using JavaScript? I have viewed this question and after reading the answers I was able to build a useful one-liner function to check browser sup...
Mammoth asked 30/3, 2022 at 16:23
3
I can't seem to discern a difference in function or meaning between using the picture element or just using the img element with the srcset attribute. I understand how they work; I just don't fully...
Nettie asked 18/9, 2018 at 19:30
10
Responsive Images in Bootstrap 4, with class .img-fluid are resized disproportionally. They keep it's height even width is shrinking down correctly. That is deforming whole image. Is there any way ...
Euterpe asked 26/1, 2017 at 9:21
2
I'm familiar with using breakpoints to change my styling for height, width, font-size, and so on, but I'm having trouble finding examples of changing an image based on my screen size.
Specifically ...
Menchaca asked 24/11, 2020 at 18:57
5
Solved
I have been into CSS for quite a while now, but srcset and sizes for the image element confuse me. Here is an example that I thought would work.
<img alt="Background image flowers"
srcset="img...
Arborization asked 8/3, 2018 at 13:37
4
I have read many post and tried everything to make the iframe responsive and keeping the 16-9 ratio... it is not bad but the video is still cropped in the youtube frame.
What is the trick with boot...
Chillon asked 10/7, 2021 at 12:58
1
Solved
I want to use .avif and .webp for images on my website, remembering that I need provide fallback for unsupported browsers. Docs https://developer.mozilla.org/en-US/docs/Web/CSS/image/image-set()#us...
Vide asked 15/7, 2021 at 10:53
6
Solved
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,...
Realtor asked 29/7, 2018 at 20:43
0
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 im...
Mavismavra asked 30/5, 2021 at 12:52
2
Solved
I have the following
<img
src="/img/footer/logo_white.png?v=2.0"
srcset="/img/footer/logo_white.png?v=2.0 1x,
/img/footer/logo_white2x.png?v=2.0 2x"
>
which works fine on normal and ...
Pairs asked 25/11, 2016 at 14:47
1
I have images in a horizontal flex container. They should all be responsive, have the same height, while keeping their aspect ratio, and without being cropped:
This can be accomplished with this...
Hearsay asked 31/3, 2020 at 19:37
1
So yet again I find myself pulling my hair over responsive images. The CMS gives me its srcset, I build a simples sizes attribute, I check the currentSrc by hover-fumbling over the attribute in Dev...
Dacron asked 12/3, 2019 at 16:8
1
Solved
Im trying to figure out how to lazy load card-columns with card-img-top, example:
<div class="card-columns">
<div class="card text-center">
<img class="card-img-top lazy" src="img...
Clifford asked 11/1, 2019 at 16:41
3
Solved
I am trying to make an image fit the browser window in relation to its height and respond dynamically to window size.
I need the image aspect ratio to stay the same but the image can be ,larger th...
Omora asked 9/8, 2016 at 8:2
1
Solved
Say I have the following image:
<img src="//picsum.photos/100" srcset="//picsum.photos/100 100w">
It appears that the sizes attribute I have not included defaults to 100vw, hence ...
Surrealism asked 10/12, 2018 at 18:57
2
Solved
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...
Istle asked 17/8, 2018 at 13:35
2
Solved
I want to provide responsive images, for that I use srcset attribute.
<img
src="https://res.cloudinary.com/demo/image/upload/w_480/group.jpg"
alt=""
srcset="
https://res.cloudinary.com/de...
Polack asked 14/8, 2017 at 9:17
1
Working on a portfolio for a photographer / videographer and trying to find a good balance between fast load and good image quality on mobile devices.
So far, I'm keen to bet on the picture element...
Baumgartner asked 11/1, 2018 at 13:2
1
Solved
I'm trying to use <img srcset /> to load images based on the size they'll appear on the page, rather than based on the size of the viewport. Perhaps examples will help:
On any viewport, whe...
Retarder asked 11/12, 2017 at 10:14
1
Solved
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...
Coreycorf asked 20/11, 2017 at 13:11
1
Solved
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 downs...
Lomax asked 24/8, 2017 at 19:24
1 Next >
© 2022 - 2024 — McMap. All rights reserved.