CSS图像最大宽度设置为原始图像大小?

nik*_*ong 62 css image

你能做这个吗?我让用户将图像上传到宽度为100%的容器中,但我不希望图像大于原始大小.非常感谢!

Mr *_*ter 105

只是不要设置width图像,只有max-width.

img {max-width:100%; height:auto}
Run Code Online (Sandbox Code Playgroud)

(`身高:auto是没有必要的,但我把它放在那里是为了完整,提醒自己我希望图像有其自然的比例.)

这个小提琴有两个盒子,一个比图像小,一个比较大.如您所见,较小框中的图像缩小,而较大框中的图像具有正常大小.

  • 如果有人想(如我)如何覆盖继承的宽度设置,只需在要分配给图像的新类中添加width:auto. (7认同)
  • 这会将最大宽度设置为容器的大小,而不是图像的原始(或自然)大小。 (2认同)
  • 这不是我阅读 OP 要求的方式。他要求它不超过原始/自然尺寸,而不是不超过容器。 (2认同)
  • @MrLister https://developer.mozilla.org/en-US/docs/Web/CSS/max-width max-width 作为百分比将最大宽度定义为包含块宽度的百分比 (2认同)