aspect ratio css

1img {
2    display: block;
3    max-width: 100%;
4    max-height: 100%;
5    width: auto;
6    height: auto;
7}

1aspect-ratio: 1 / 1;

1aspect-ratio: 16 / 9;
2// horizontal/vertical

1/* Exact resolution */
2@media (-webkit-device-pixel-ratio: 1) {
3  p {
4    color: red;
5  }
6}
7
8/* Minimum resolution */
9@media (-webkit-min-device-pixel-ratio: 1.1) {
10  p {
11    font-size: 1.5em;
12  }
13}
14
15/* Maximum resolution */
16@media (-webkit-max-device-pixel-ratio: 3) {
17  p {
18    background: yellow;
19  }
20}