Scale image with CSS but limit to orignial size

蓝咒 提交于 2019-12-20 02:32:09

问题


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

标签
易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!