Условный стиль CSS для изображений в зависимости от их * оригинальной * ширины или высоты

Question

Как я могу создать такой стиль CSS для изображений, который будет применяться только к изображениям с минимальным исходным размером определенной суммы?

Например, я хочу, чтобы все изображения с исходной шириной , равной или превышающей 500 пикселей, имели определенный стиль CSS.Но другие - нет, этот стиль CSS не должен применяться к ним.

Без JavaScript.

Answer 1

Я думаю, что вы спрашиваете, есть ли селектор CSS, который может нацеливать изображения на основе их сохраненных размеров, а не отображаемого размера, т.е. игнорировать масштабирование.

К сожалению, в CSS нет ничего, что могло бы запрашивать такие свойства (пока).

Одним из решений может быть присвоение больших изображений другим именам, чем маленьким, таким образом, вы можете использовать селектор [data-value] .В этом примере сопоставление основано на измерении в пути изображения, но, возможно, вы могли бы использовать large или что-то в пути?

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">

Можете ли вы объяснить, почему вы хотите представлять большие изображения по-разному, чтобы я мог дать лучший ответ?