css 可以按比例缩放图片吗?

时间:2021-04-16

  设置对应图片的width和htight的具体数值就可以了。举例一个:

  img{
  width:auto;
  height:auto;
  max-width:100%;
  max-height:100%;
  }

  这样设置图片的话,可以使图片在指定的空间内缩放。

  举例:

  <div style="width:50px;height:40px">
  <img src="a.jpg">
  <!--这里我们假如图片的实际尺寸是320X320-->
  </div>

  根据上面4个css可以知道:

  图片被缩放后在div的尺寸是:

  width:50px;(因为图片的width:100%)

  height:50px(这里height是在width:100%被缩放后的尺寸。)

  我们可以发现这个50px的高度仍然超出了div的40px的高度,不符合max-height

  这个时候,max-height:100%;就会发挥作用,

  在max-height:100%;的作用下,图片被缩放后在div的尺寸是:

  width:40px;

  height:40px;

  这个尺寸符合max-height和max-width。

声明:本页内容来源网络,仅供用户参考;我单位不保证亦不表示资料全面及准确无误,也不保证亦不表示这些资料为最新信息,如因任何原因,本网内容或者用户因倚赖本网内容造成任何损失或损害,我单位将不会负任何法律责任。如涉及版权问题,请提交至online#300.cn邮箱联系删除。

相关文章