Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Scale image with CSS but limit to orignial size

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

like image 433
Willem de Jong Avatar asked Dec 16 '14 13:12

Willem de Jong


2 Answers

You could use max-width to prevent image width from becoming larger than original size.

img {
    width: auto;
    max-width: 100%;
    height: auto;
}
like image 91
emmanuel Avatar answered Nov 13 '22 05:11

emmanuel


Not answering for the scale bug for image size limit this could work:

img {
  max-height: max-content;
}
like image 27
alex_1948511 Avatar answered Nov 13 '22 05:11

alex_1948511