CSS equivalent to srcset (x-descriptors) for both iPhones and Android phones
0
I have the following declaration in my html page.
<img src="images/banner_1000.jpg" width="500" srcset="images/banner_2000.jpg 2x, images/banner_3000.jpg 3x">
An x-descriptor with both 2x and 3x defined. I want to create a css equivalent so that I can place text on top of this image. Therefore I want to apply a background image to an element, let's just call it #showcase.
I found the following css that will load the image in the pixel ratio 2x.
@media
(-webkit-min-device-pixel-ratio: 2),
(min-resolution: 192dpi) {
#showcase {
background-image: url(banner_2000.jpg);
}
}
My question is what is the 3x version. Obviously device-pixel-ratio is 3, but what is the min-resolution?
css image media-queries resolution devicepixelratio
asked Nov 28 '18 at 15:44
DaveKDaveK
1811111
add a comment |
0
I have the following declaration in my html page.
<img src="images/banner_1000.jpg" width="500" srcset="images/banner_2000.jpg 2x, images/banner_3000.jpg 3x">
An x-descriptor with both 2x and 3x defined. I want to create a css equivalent so that I can place text on top of this image. Therefore I want to apply a background image to an element, let's just call it #showcase.
I found the following css that will load the image in the pixel ratio 2x.
@media
(-webkit-min-device-pixel-ratio: 2),
(min-resolution: 192dpi) {
#showcase {
background-image: url(banner_2000.jpg);
}
}
My question is what is the 3x version. Obviously device-pixel-ratio is 3, but what is the min-resolution?
css image media-queries resolution devicepixelratio
asked Nov 28 '18 at 15:44
DaveKDaveK
1811111
Possible duplicate of what exactly is device pixel ratio?
– Michaël Vanderheyden
Nov 29 '18 at 9:43
I was asking specifically for the min-resolution on a device with pixel-ratio of 3, however I'm beginning to wonder if I really even need a min-resolution or not because DPI is dots per inch and I am not really worrying about printing logistics. I may just stick to the device-pixel-ratio and forget about min-resolution. My guess is the min-resolution is the same.
– DaveK
Nov 29 '18 at 14:34
1
right... in order to match your image tag, which doesn't take DPI into account, you only need the min-device-pixel-ratio in your media query. If you were using sizes in combination with your srcset in the <img> tag. You would have added the same media query for the viewport for you background image too... See here: sitepoint.com/how-to-build-responsive-images-with-srcset Btw. you have a width of 500(what?) on your <img> tag. I suppose it is pixels, but you should add the unit.
– Michaël Vanderheyden
Nov 29 '18 at 15:07
Yep.. I should add that unit. Thanks for the info. ;)
– DaveK
Nov 30 '18 at 18:35
add a comment |
0
0
0
I have the following declaration in my html page.
<img src="images/banner_1000.jpg" width="500" srcset="images/banner_2000.jpg 2x, images/banner_3000.jpg 3x">
An x-descriptor with both 2x and 3x defined. I want to create a css equivalent so that I can place text on top of this image. Therefore I want to apply a background image to an element, let's just call it #showcase.
I found the following css that will load the image in the pixel ratio 2x.
@media
(-webkit-min-device-pixel-ratio: 2),
(min-resolution: 192dpi) {
#showcase {
background-image: url(banner_2000.jpg);
}
}
My question is what is the 3x version. Obviously device-pixel-ratio is 3, but what is the min-resolution?
css image media-queries resolution devicepixelratio
asked Nov 28 '18 at 15:44
DaveKDaveK
1811111
I have the following declaration in my html page.
<img src="images/banner_1000.jpg" width="500" srcset="images/banner_2000.jpg 2x, images/banner_3000.jpg 3x">
An x-descriptor with both 2x and 3x defined. I want to create a css equivalent so that I can place text on top of this image. Therefore I want to apply a background image to an element, let's just call it #showcase.
I found the following css that will load the image in the pixel ratio 2x.
@media
(-webkit-min-device-pixel-ratio: 2),
(min-resolution: 192dpi) {
#showcase {
background-image: url(banner_2000.jpg);
}
}
My question is what is the 3x version. Obviously device-pixel-ratio is 3, but what is the min-resolution?
css image media-queries resolution devicepixelratio
css image media-queries resolution devicepixelratio
asked Nov 28 '18 at 15:44
DaveKDaveK
1811111
asked Nov 28 '18 at 15:44
DaveKDaveK
1811111
asked Nov 28 '18 at 15:44
DaveKDaveK
1811111
asked Nov 28 '18 at 15:44
DaveKDaveK
1811111
asked Nov 28 '18 at 15:44
DaveKDaveK
1811111
1811111
Possible duplicate of what exactly is device pixel ratio?
– Michaël Vanderheyden
Nov 29 '18 at 9:43
I was asking specifically for the min-resolution on a device with pixel-ratio of 3, however I'm beginning to wonder if I really even need a min-resolution or not because DPI is dots per inch and I am not really worrying about printing logistics. I may just stick to the device-pixel-ratio and forget about min-resolution. My guess is the min-resolution is the same.
– DaveK
Nov 29 '18 at 14:34
1
right... in order to match your image tag, which doesn't take DPI into account, you only need the min-device-pixel-ratio in your media query. If you were using sizes in combination with your srcset in the <img> tag. You would have added the same media query for the viewport for you background image too... See here: sitepoint.com/how-to-build-responsive-images-with-srcset Btw. you have a width of 500(what?) on your <img> tag. I suppose it is pixels, but you should add the unit.
– Michaël Vanderheyden
Nov 29 '18 at 15:07
Yep.. I should add that unit. Thanks for the info. ;)
– DaveK
Nov 30 '18 at 18:35
add a comment |
Possible duplicate of what exactly is device pixel ratio?
– Michaël Vanderheyden
Nov 29 '18 at 9:43
I was asking specifically for the min-resolution on a device with pixel-ratio of 3, however I'm beginning to wonder if I really even need a min-resolution or not because DPI is dots per inch and I am not really worrying about printing logistics. I may just stick to the device-pixel-ratio and forget about min-resolution. My guess is the min-resolution is the same.
– DaveK
Nov 29 '18 at 14:34
1
right... in order to match your image tag, which doesn't take DPI into account, you only need the min-device-pixel-ratio in your media query. If you were using sizes in combination with your srcset in the <img> tag. You would have added the same media query for the viewport for you background image too... See here: sitepoint.com/how-to-build-responsive-images-with-srcset Btw. you have a width of 500(what?) on your <img> tag. I suppose it is pixels, but you should add the unit.
– Michaël Vanderheyden
Nov 29 '18 at 15:07
Yep.. I should add that unit. Thanks for the info. ;)
– DaveK
Nov 30 '18 at 18:35
Possible duplicate of what exactly is device pixel ratio?
– Michaël Vanderheyden
Nov 29 '18 at 9:43
Possible duplicate of what exactly is device pixel ratio?
– Michaël Vanderheyden
Nov 29 '18 at 9:43
I was asking specifically for the min-resolution on a device with pixel-ratio of 3, however I'm beginning to wonder if I really even need a min-resolution or not because DPI is dots per inch and I am not really worrying about printing logistics. I may just stick to the device-pixel-ratio and forget about min-resolution. My guess is the min-resolution is the same.
– DaveK
Nov 29 '18 at 14:34
I was asking specifically for the min-resolution on a device with pixel-ratio of 3, however I'm beginning to wonder if I really even need a min-resolution or not because DPI is dots per inch and I am not really worrying about printing logistics. I may just stick to the device-pixel-ratio and forget about min-resolution. My guess is the min-resolution is the same.
– DaveK
Nov 29 '18 at 14:34
1
1
right... in order to match your image tag, which doesn't take DPI into account, you only need the min-device-pixel-ratio in your media query. If you were using sizes in combination with your srcset in the <img> tag. You would have added the same media query for the viewport for you background image too... See here: sitepoint.com/how-to-build-responsive-images-with-srcset Btw. you have a width of 500(what?) on your <img> tag. I suppose it is pixels, but you should add the unit.
– Michaël Vanderheyden
Nov 29 '18 at 15:07
right... in order to match your image tag, which doesn't take DPI into account, you only need the min-device-pixel-ratio in your media query. If you were using sizes in combination with your srcset in the <img> tag. You would have added the same media query for the viewport for you background image too... See here: sitepoint.com/how-to-build-responsive-images-with-srcset Btw. you have a width of 500(what?) on your <img> tag. I suppose it is pixels, but you should add the unit.
– Michaël Vanderheyden
Nov 29 '18 at 15:07
Yep.. I should add that unit. Thanks for the info. ;)
– DaveK
Nov 30 '18 at 18:35
Yep.. I should add that unit. Thanks for the info. ;)
– DaveK
Nov 30 '18 at 18:35
add a comment |
0
active
oldest
votes
Your Answer
StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");
StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});
function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});
}
});
draft saved
draft discarded
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53523196%2fcss-equivalent-to-srcset-x-descriptors-for-both-iphones-and-android-phones%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
0
active
oldest
votes
0
active
oldest
votes
active
oldest
votes
active
oldest
votes
draft saved
draft discarded
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
draft saved
draft discarded
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53523196%2fcss-equivalent-to-srcset-x-descriptors-for-both-iphones-and-android-phones%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Possible duplicate of what exactly is device pixel ratio?
– Michaël Vanderheyden
Nov 29 '18 at 9:43
I was asking specifically for the min-resolution on a device with pixel-ratio of 3, however I'm beginning to wonder if I really even need a min-resolution or not because DPI is dots per inch and I am not really worrying about printing logistics. I may just stick to the device-pixel-ratio and forget about min-resolution. My guess is the min-resolution is the same.
– DaveK
Nov 29 '18 at 14:34
1
right... in order to match your image tag, which doesn't take DPI into account, you only need the min-device-pixel-ratio in your media query. If you were using sizes in combination with your srcset in the <img> tag. You would have added the same media query for the viewport for you background image too... See here: sitepoint.com/how-to-build-responsive-images-with-srcset Btw. you have a width of 500(what?) on your <img> tag. I suppose it is pixels, but you should add the unit.
– Michaël Vanderheyden
Nov 29 '18 at 15:07
Yep.. I should add that unit. Thanks for the info. ;)
– DaveK
Nov 30 '18 at 18:35