python (65.2k questions)

javascript (44.3k questions)

reactjs (22.7k questions)

java (20.8k questions)

c# (17.4k questions)

html (16.3k questions)

r (13.7k questions)

android (13k questions)

Questions - responsive-images

How to check if the browser supports AVIF images

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 suppor...
test-img

Rafid Muhymin Wafi

javascript

image

webp

responsive-images

avif

Votes: 0

Answers: 2

Latest Answer

as far as I can tell, the browser can't create AVIF, JXL or GIF files with the toDataURL method out of a canvas. I currently use the following method to detect AVIF support via Javascript: var avif = ...
test-img

user18761608

How to create a Facebook like Cover Photo Responsive UI

How to create responsive Facebook like cover photo where the image should always maintain the top position, not stretched and being cut? I tried to inspect the codes of Facebook Cover Photo but I sti...
test-img

Paul

javascript

css

responsive-design

responsive-images

Votes: 0

Answers: 1

Latest Answer

Try utilizing object-fit to keep the image the correct dimensions within an area, similar to when using an image in background-image CSS. The media queries I added are to adjust the size of the image ...
test-img

wouch

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 ...
test-img

CoderPs

html

css

responsive-design

responsive

responsive-images

Votes: 0

Answers: 1

Latest Answer

You can try to add this to your style sheet: body{ background-size: cover; background-repeat: no-repeat; background-position: center; background-attachment: fixed; }
test-img

HugoD

Safari load two images (dublicate with different sizes) from srcset in tag img

I had a problem in Safari when the page loaded in Devtools > Network drowser loaded two versions of the same image. For example: yNG3yARUuYG2BUZL___media_library_original_1080_1080.jpg and yNG3yARU...
test-img

Pavlo

vue.js

safari

responsive-images

srcset

Votes: 0

Answers: 0

Posts

Questions

Blogs

Jobs