Conditional CSS style for images depending on their *original* width or height
up vote
1
down vote
favorite
How can I create such a CSS style for images that will only be applied to the images that have the minimum original size of a certain amount?
For instance, I want all the images that have the original width equal or more than 500px to have a certain css style. But others - not, that CSS style shouldn’t be applied to them.
Without javascript.
html css image css3
asked Nov 22 at 16:02
Maddani
65
add a comment |
up vote
1
down vote
favorite
How can I create such a CSS style for images that will only be applied to the images that have the minimum original size of a certain amount?
For instance, I want all the images that have the original width equal or more than 500px to have a certain css style. But others - not, that CSS style shouldn’t be applied to them.
Without javascript.
html css image css3
asked Nov 22 at 16:02
Maddani
65
1
It is not possible to use conditional in CSS without preprocessors like Sass. As long as you did not mention Sass or any other preprocessor in your question, the immediate awnser would be NO , you can not do that without javascript. By the way why not use javascript?
– Caio Saldanha
Nov 22 at 16:11
@CaioSaldanha, why did you write "no" in capslock?
– Maddani
Nov 22 at 16:13
add a comment |
up vote
1
down vote
favorite
up vote
1
down vote
favorite
How can I create such a CSS style for images that will only be applied to the images that have the minimum original size of a certain amount?
For instance, I want all the images that have the original width equal or more than 500px to have a certain css style. But others - not, that CSS style shouldn’t be applied to them.
Without javascript.
html css image css3
asked Nov 22 at 16:02
Maddani
65
How can I create such a CSS style for images that will only be applied to the images that have the minimum original size of a certain amount?
For instance, I want all the images that have the original width equal or more than 500px to have a certain css style. But others - not, that CSS style shouldn’t be applied to them.
Without javascript.
html css image css3
html css image css3
asked Nov 22 at 16:02
Maddani
65
asked Nov 22 at 16:02
Maddani
65
asked Nov 22 at 16:02
Maddani
65
asked Nov 22 at 16:02
Maddani
65
asked Nov 22 at 16:02
Maddani
65
65
1
It is not possible to use conditional in CSS without preprocessors like Sass. As long as you did not mention Sass or any other preprocessor in your question, the immediate awnser would be NO , you can not do that without javascript. By the way why not use javascript?
– Caio Saldanha
Nov 22 at 16:11
@CaioSaldanha, why did you write "no" in capslock?
– Maddani
Nov 22 at 16:13
add a comment |
1
It is not possible to use conditional in CSS without preprocessors like Sass. As long as you did not mention Sass or any other preprocessor in your question, the immediate awnser would be NO , you can not do that without javascript. By the way why not use javascript?
– Caio Saldanha
Nov 22 at 16:11
@CaioSaldanha, why did you write "no" in capslock?
– Maddani
Nov 22 at 16:13
1
1
It is not possible to use conditional in CSS without preprocessors like Sass. As long as you did not mention Sass or any other preprocessor in your question, the immediate awnser would be NO , you can not do that without javascript. By the way why not use javascript?
– Caio Saldanha
Nov 22 at 16:11
It is not possible to use conditional in CSS without preprocessors like Sass. As long as you did not mention Sass or any other preprocessor in your question, the immediate awnser would be NO , you can not do that without javascript. By the way why not use javascript?
– Caio Saldanha
Nov 22 at 16:11
@CaioSaldanha, why did you write "no" in capslock?
– Maddani
Nov 22 at 16:13
@CaioSaldanha, why did you write "no" in capslock?
– Maddani
Nov 22 at 16:13
add a comment |
1 Answer
1
active
oldest
votes
up vote
0
down vote
I think you're asking if there's a CSS selector that could target images based on their saved dimensions rather than the displayed size i.e. ignore scaling.
Unfortunately there is nothing in CSS that can query such properties (yet).
One solution may be to name large images differently to small images, this way you can use the [data-value] selector. In this example I've match based on a dimension in the image path, but perhaps you could use large or something in the path?
img {
max-height: 200px;
border: 5px solid black;
}
/* Target images with /640/ in the src path.*/
img[src*="/640/"] {
border-color: red;
}<img src="https://placeimg.com/640/510/any" alt="Image 1">
<img src="https://placeimg.com/440/480/any" alt="Image 2">
<img src="https://placeimg.com/640/680/any" alt="Image 3">
<img src="https://placeimg.com/440/420/any" alt="Image 4">Can you elaborate on why you wish to represent large images differently so I can possibly provide a better answer?
answered Nov 22 at 16:41
Tash
62
add a comment |
1 Answer
1
active
oldest
votes
1 Answer
1
active
oldest
votes
active
oldest
votes
active
oldest
votes
up vote
0
down vote
I think you're asking if there's a CSS selector that could target images based on their saved dimensions rather than the displayed size i.e. ignore scaling.
Unfortunately there is nothing in CSS that can query such properties (yet).
One solution may be to name large images differently to small images, this way you can use the [data-value] selector. In this example I've match based on a dimension in the image path, but perhaps you could use large or something in the path?
img {
max-height: 200px;
border: 5px solid black;
}
/* Target images with /640/ in the src path.*/
img[src*="/640/"] {
border-color: red;
}<img src="https://placeimg.com/640/510/any" alt="Image 1">
<img src="https://placeimg.com/440/480/any" alt="Image 2">
<img src="https://placeimg.com/640/680/any" alt="Image 3">
<img src="https://placeimg.com/440/420/any" alt="Image 4">Can you elaborate on why you wish to represent large images differently so I can possibly provide a better answer?
answered Nov 22 at 16:41
Tash
62
add a comment |
up vote
0
down vote
I think you're asking if there's a CSS selector that could target images based on their saved dimensions rather than the displayed size i.e. ignore scaling.
Unfortunately there is nothing in CSS that can query such properties (yet).
One solution may be to name large images differently to small images, this way you can use the [data-value] selector. In this example I've match based on a dimension in the image path, but perhaps you could use large or something in the path?
img {
max-height: 200px;
border: 5px solid black;
}
/* Target images with /640/ in the src path.*/
img[src*="/640/"] {
border-color: red;
}<img src="https://placeimg.com/640/510/any" alt="Image 1">
<img src="https://placeimg.com/440/480/any" alt="Image 2">
<img src="https://placeimg.com/640/680/any" alt="Image 3">
<img src="https://placeimg.com/440/420/any" alt="Image 4">Can you elaborate on why you wish to represent large images differently so I can possibly provide a better answer?
answered Nov 22 at 16:41
Tash
62
add a comment |
up vote
0
down vote
up vote
0
down vote
I think you're asking if there's a CSS selector that could target images based on their saved dimensions rather than the displayed size i.e. ignore scaling.
Unfortunately there is nothing in CSS that can query such properties (yet).
One solution may be to name large images differently to small images, this way you can use the [data-value] selector. In this example I've match based on a dimension in the image path, but perhaps you could use large or something in the path?
img {
max-height: 200px;
border: 5px solid black;
}
/* Target images with /640/ in the src path.*/
img[src*="/640/"] {
border-color: red;
}<img src="https://placeimg.com/640/510/any" alt="Image 1">
<img src="https://placeimg.com/440/480/any" alt="Image 2">
<img src="https://placeimg.com/640/680/any" alt="Image 3">
<img src="https://placeimg.com/440/420/any" alt="Image 4">Can you elaborate on why you wish to represent large images differently so I can possibly provide a better answer?
answered Nov 22 at 16:41
Tash
62
I think you're asking if there's a CSS selector that could target images based on their saved dimensions rather than the displayed size i.e. ignore scaling.
Unfortunately there is nothing in CSS that can query such properties (yet).
One solution may be to name large images differently to small images, this way you can use the [data-value] selector. In this example I've match based on a dimension in the image path, but perhaps you could use large or something in the path?
img {
max-height: 200px;
border: 5px solid black;
}
/* Target images with /640/ in the src path.*/
img[src*="/640/"] {
border-color: red;
}<img src="https://placeimg.com/640/510/any" alt="Image 1">
<img src="https://placeimg.com/440/480/any" alt="Image 2">
<img src="https://placeimg.com/640/680/any" alt="Image 3">
<img src="https://placeimg.com/440/420/any" alt="Image 4">Can you elaborate on why you wish to represent large images differently so I can possibly provide a better answer?
img {
max-height: 200px;
border: 5px solid black;
}
/* Target images with /640/ in the src path.*/
img[src*="/640/"] {
border-color: red;
}<img src="https://placeimg.com/640/510/any" alt="Image 1">
<img src="https://placeimg.com/440/480/any" alt="Image 2">
<img src="https://placeimg.com/640/680/any" alt="Image 3">
<img src="https://placeimg.com/440/420/any" alt="Image 4">img {
max-height: 200px;
border: 5px solid black;
}
/* Target images with /640/ in the src path.*/
img[src*="/640/"] {
border-color: red;
}<img src="https://placeimg.com/640/510/any" alt="Image 1">
<img src="https://placeimg.com/440/480/any" alt="Image 2">
<img src="https://placeimg.com/640/680/any" alt="Image 3">
<img src="https://placeimg.com/440/420/any" alt="Image 4">answered Nov 22 at 16:41
Tash
62
answered Nov 22 at 16:41
Tash
62
answered Nov 22 at 16:41
Tash
62
answered Nov 22 at 16:41
Tash
62
62
add a comment |
add a comment |
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.
Some of your past answers have not been well-received, and you're in danger of being blocked from answering.
Please pay close attention to the following guidance:
- 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.
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%2f53434636%2fconditional-css-style-for-images-depending-on-their-original-width-or-height%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
1
It is not possible to use conditional in CSS without preprocessors like Sass. As long as you did not mention Sass or any other preprocessor in your question, the immediate awnser would be NO , you can not do that without javascript. By the way why not use javascript?
– Caio Saldanha
Nov 22 at 16:11
@CaioSaldanha, why did you write "no" in capslock?
– Maddani
Nov 22 at 16:13