For a responsive design, i would like to scale down some images:
img {
width:100%;
height:auto;
}
This works as expected, but if the width of the screen exceeds the original size of the image, it blows up the image.
Is there a way to limit this scaling to its original size? So that it only gets smaller if necessary?
Thanks in advance for your answer.
Willem
You could use max-width
to prevent image width from becoming larger than original size.
img {
width: auto;
max-width: 100%;
height: auto;
}
Not answering for the scale bug for image size limit this could work:
img {
max-height: max-content;
}
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With