问题
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
回答1:
You could use max-width
to prevent image width from becoming larger than original size.
img {
width: auto;
max-width: 100%;
height: auto;
}
回答2:
Put the images in a <div>
and give that <div>
a max-width.
CSS
#test {
max-width: 400px;
}
img {
width:100%;
height:auto;
}
HTML
<div id="test">
<img src="http://a.dilcdn.com/bl/wp-content/uploads/sites/8/2012/09/02-11.jpg" />
</div>
JSfiddle
回答3:
Not answering for the scale bug for image size limit this could work:
img {
max-height: max-content;
}
来源:https://stackoverflow.com/questions/27505879/scale-image-with-css-but-limit-to-orignial-size