aspect-ratio css code example
Example 1: keep aspect ratio of image css
img {
display: block;
max-width: 100%;
max-height: 100%;
width: auto;
height: auto;
}
Example 2: aspect-ratio css
aspect-ratio: 1 / 1;
Example 3: device-pixel-ratio css
/* Exact resolution */
@media (-webkit-device-pixel-ratio: 1) {
p {
color: red;
}
}
/* Minimum resolution */
@media (-webkit-min-device-pixel-ratio: 1.1) {
p {
font-size: 1.5em;
}
}
/* Maximum resolution */
@media (-webkit-max-device-pixel-ratio: 3) {
p {
background: yellow;
}
}